首页 文章

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

提问于
浏览 次
2

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

我有一个列表，我想在vue.js中动态填充 .

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

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

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

或者，如果我硬编码src图像加载，src是webpack创建的路径，找到正确的图像 .

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

javascript webpack vue.js

1 回答

  • 7

    你需要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（）方法在运行时返回正确路径的方式 .

    回复于

相关问题