Question

我遇到的问题是将vue.js与webpack一起使用。

我有一个列表，我想在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（）方法在运行时返回正确路径的方式。

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

1 个答案: