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

问题描述

问 题

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'
      }]

解决方案

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

这篇关于vue.js - vue v-for渲染图片 图片地址没被编译的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！