vue加载图片失败解决方法
在vue项目中,我们引用图片组件 el-image 绑定路径会提示加载失败,如下图所示<el-image class="zuipinImg"src="@/assets/photo.png":preview-src-list="zuopinsrcList"></el-image>解决方案1、使用绝对路径<el-image :src="'https://fuss10.el
·
在vue项目中,我们引用图片组件 el-image 绑定路径会提示加载失败,如下图所示
<el-image class="zuipinImg"
src="@/assets/photo.png"
:preview-src-list="zuopinsrcList">
</el-image>
解决方案
1、使用绝对路径
<el-image :src="'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'"></el-image>
2、使用require
<el-image :src="require('@/assets/photo.png')"> </el-image>
或者
<template>
<el-image :src="imgUrl">
</template>
<script>
export default {
data:function(){
return {
imgUrl: require("@/assets/photo.png")
}
}
}
</script>
3、使用import
<template>
<el-image :src="imgUrl">
</el-image>
</template>
<script>
import jpg from '@/assets/photo.png'
export default {
data:function(){
return {
imgUrl: jpg
}
}
}
</script>
更多推荐
已为社区贡献3条内容
所有评论(0)