vue加载图片失败解决方法

在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>