vue 中 给img图片添加动态路径 路径正确但是图片不显示问题
【代码】vue 中 给img图片添加动态路径 路径正确但是图片不显示问题。
·
问题代码:
<img class="avatar" v-bind:src="user.img" v-bind:alt="user.name">
user: {
name: 'Li-yiwei',
img: ('../../assets/image/1.jpg')
}
路径正确但是图片不显示
解决方法
data: {
return: {
name: 'icon_yunying_ros'
}
}
user: {
name: 'Li-yiwei',
img: require('../../assets/image/${name}.jpg')
}
使用require
示例
:src="require(../../assets/image/${item.img})"
下面的实例更直观点儿:
一般情况我们引入图片方式:
这样传过去的图片地址,在页面无法显示:
解决方法:使用 require
<template>
<div class="logo">
<img :src="logo" alt="logo">
</div>
</template>
<script>
export default {
name: 'login',
data(){
return{
logo:require('@/assets/common/logo1.png')
}
}
}
</script>
更多推荐
已为社区贡献15条内容
所有评论(0)