vue里面将img标签的src属性动态绑定到一个数组上,发现:src=’ '并没有软用,查了一些文章,终于发现是要用require包裹起来才行!
<template>
<div >
<div v-for="item in img_list" :key="item.index">
{{item.title}}
<img :src="item.imgSrc" alt="">
</div>
</div>
</template>
<script>
export default {
data() {
return {
img_list:[
//用require()包裹路径之后,图片才可以显示!
// {
// imgSrc:require('@/assets/avtar.jpg')
// },
// {
// imgSrc:require('@/assets/avtar.jpg')
// },
// {
// imgSrc:require('@/assets/avtar.jpg')
// },
{
title:'hello',
//未用require()包裹路径浏览器是显示不出图片的,且不会报错
imgSrc:'@/assets/avtar.jpg'
}
]
}
},
}
</script>