在vue项目中,我们引用图片组件 el-image 绑定路径会提示加载失败,如下图所示
<el-image class="zuipinImg" src="@/assets/photo.png" :preview-src-list="zuopinsrcList"></el-image>
解决方案
1、使用绝对路径
<el-image :src="'/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>