VueJs 动态加载 src 不工作

Answer 1

注意：整个答案使用

require

来解决问题。我知道没有避免显式导入实用程序的解决方法。

---

这里有几个 Vue/Webpack 怪癖。

首先，Webpack 只知道如何在最终构建中将一组有限的导入路径规范转换为合适的 URL。使用

data

变量作为

:src

属性的值是不受支持的语法：Webpack 只是将其视为通用变量，不会对其进行转换。

如上面链接的问题中所述，解决问题的第一步是使用像这样的

require()

语法：

<img class="image" :src="imageSrc" alt="image">

export default {
  data () {
    return {
      imageSrc: require('@/assets/gallery/images/20211005_0044.jpg')
    }
  }
}

但是，当

require

中的路径需要动态时，还有一个额外的怪癖。根据this answer，如果文件名完全作为变量给出，Webpack 无法导入该文件。换句话说，

require(this.imageSrc)

（其中

imageSrc

是一个字符串变量）将不起作用。

解决方法是在变量中只包含一个子目录（或文件名），并在字符串中使用静态前缀，如下所示：

<img class="image" :src="imageSrc" alt="image">

export default {
  data () {
    return {
      imageName: '20211005_0044.jpg'
    }
  },
  computed: {
    imageSrc () {
      return require(`@/assets/gallery/images/${this.imageName}`);
    }
  }
}