vue v-for渲染图片 图片地址没被编译的问题

Question

webpak 对图片进行打包会给图片添加哈希值，正常template里引用图片没有问题，但是在v-for的时候通过数据传来的url却没有被编译，这该怎么办

<div v-for='item in imgData'>
      <img :src="item.url">//仍然渲染为<img src ='../../assete/workbench/1.png'>
    </div>
    
    //数据
    imgData: [{
        url: '../../assets/workbench/1.png'
      }, {
        url: '../../assets/workbench/2.png'
      }, {
        url: '../../assets/workbench/3.png'
      }]

Answer 1

js里的应该是要写成 url: require('../../assets/workbench/1.png') 这样的吧

Answer 2

你可以给每一项绑定不同的 :key 试试,类似 vue 1.x 的 track-by

Answer 3

可以把图片放到static文件夹内

Answer 4

1.图片名称如果从后端获取，因为后端返回的是字符串，

   {
      "id" : "m1",
      //"icon" : require('./../assets/img/config.svg'), // 这样是不行的
      "icon": 'config',
      "text" : "配置",
      "url" : "",
}

所以，建议放在和src平级的static(新建的文件夹)里，这里的static也可以放<link rel="shortcut icon" href="/static/drpLogo.png">等这种网站title logo图标等。

2.如果是js里，应该是要写成 url: require('../../assets/workbench/1.png')

   {
      "id" : "m1",
      "icon" : require('./../assets/img/config.svg'), // 这样是可行的
      "text" : "配置",
      "url" : "",
}

Answer 5

同意niaogege的看法，来个比较全的写法吧。require要写在VUE代码外面，不知道为什么，但是这样做是对的，希望对大家有所帮助吧。