无法在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 https://webpack.github.io/docs/context.html.

例如:

<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()方法在运行时返回正确路径的方式.