【问题记录】Vue中<img>动态添加路径不显示的问题

需求：移动端的banner循环动态添加tabber

//无法加载
<div v-for="(item.index) in list">
    <img :src="item.imgurl" />
</div>
export default{
    data(){
        return {
            list:[{text:'二手房',imgurl:'../assets/images/111.png'},
            {text:'新房',imgurl:'../assets/images/222.png'}]
        }
    }
}

//可以加载
<img src="../assets/images/111.png"/>

解决方法：

export default{
    data(){
        return {
            list:[{text:'二手房',imgurl:require('../assets/images/111.png')},
            {text:'新房',imgurl:require('../assets/images/222.png')}]
        }
    }
}

原因： 必须用 require() 引入图片才能生效，和 vue-loader 资源路径处理 有关系。

参考文档： 1、vue-loader-v14.vuejs.org/zh-cn/confi…