无法在 Vue.js + webpack 中动态传递 imgs 的相对 src 路径

Question

我遇到的问题是在 webpack 中使用 vue.js。

我有一个要在 vue.js 中动态填充的列表。

我正在使用 v-for 迭代每个对象并创建列表项。

将 img src 标签绑定到数据点 {{resource.img}} 看起来像这样： <img v-bind:src="resource.img">动态加载图像。

但是，当客户端渲染页面时，src 路径是正确的，但它是实际的相对路径（例如“../assets/example.png”等，而不是 webpack 输出的路径。因此，图像创建了一个 404因为“../assets/example.png”中没有图像。

或者，如果我对图像加载的 src 进行硬编码，并且 src 是 webpack 创建的某个路径，以找到正确的图像。

如何使用 webpack 和 vue.js 动态设置 src？

Answer 1

你需要require.context 。

例如：

<img width="30" height="30" :src="imgUrl(resource.img)">

---

var images = require.context('../../assets/img/', false, /\.jpg$/)

export default {
  methods: {
    imgUrl: function (path) {
      return images('./' + path)
    }
  }
}

对于在源文件夹中找到的任何图像，require.context 基本上会将源路径映射到构建目录中的最终路径。 这就是 imgUrl() 方法在运行时返回正确路径的方式。