vue动态加载图片--图片不存在时，显示默认图片

vue动态加载图片–图片不存在时，显示默认图片

一、背景

显示课程信息时，需要根据courseId为每一门课程绑定相应的课程图片。课程图片放在前端/src/assets/picture/course中。使用require导入图片时，若图片不存在，页面出现error，显示模块找不到。

二、初始的动态绑定方式

1、图片存放目录

2、script代码使用计算属性计算图片路径

export default {
props: {
    course: {
      type: Object,
      default() {
        return {};
      }
    }
  },
 computed: {
    imgPath() {
      return require("@/assets/picture/course/" + this.course.courseId + ".png");
    }
  }
}

3、template中绑定图片路径

<el-image :src="imgPath" style="width: 380px; height: 240px"></el-image>

el-image 为element组件
4、不足
当imgPath指向的位置不存在图片时，使用require导入图片，页面会error。不仅没有图片信息，课程相关的文字信息也无法显示。为了界面友好，可以在图片不存在时，显示默认的图片。放进方式如下。

三、改进的动态绑定方式

1、图片存放目录

项目使用的是vue-cli3，静态目录为public，没有static目录。webpack打包资源时，会把静态目录（与src同级的public目录）下的文件放在根目录下，且文件名不会改变。而放在其他目录下时，文件名会被更改，所以需要使用require导入图片。可通过运行命令npm run build，构建项目。在项目路径下的dist文件夹中查看文件打包后的文件。静态目录下的文件可以通过url直接访问到，如想看defaultImage.png,可通过在浏览器中输入http://localhost:8080/course/img/defaultImage.png访问。

注意，路径中不包含public。

2、script代码使用计算属性计算图片路径

export default {
props: {
    course: {
      type: Object,
      default() {
        return {};
      }
    }
  },
 computed: {
    imgPath() {
      return "/course/img/" + this.course.courseId + ".png";
    }
  }
}

3、template中绑定图片路径

<el-image :src="imgPath" style="width: 380px; height: 240px">
    <div slot="error">
        <img
            src="/course/img/defaultIamge.png"
            style="width: 380px; height: 240px"
        />
    </div>
</el-image>

当imgPath指向的位置不存在图片时，会使用显示默认的图片defaultIamge.png