前端VUE2使用require请求图片资源，如找不到图片html页面直接报错的处理

余道各努力，千里自同风

已于 2024-05-13 22:35:55 修改

阅读量1.4k

点赞数 3

文章标签：前端 vue.js html

于 2023-06-13 09:59:42 首次发布

本文链接：https://blog.youkuaiyun.com/m0_70547044/article/details/131182332

版权

文章介绍了在Vue.js中使用`getImg()`方法动态获取图片路径，尝试加载以`id`命名的图片，如果找不到则返回默认图片的实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<img class="center-img" :src="getImg()" alt="" />

1 、getImg()为获取图片地址的方法，在标签中直接引用
2、methods里面定义方法getImg()

getImg() {
      // return require("@/views/img/xxx.png");
	  try {
		  return require("@/views/img/idimg/" + this.id + ".png");
		  //图片地址
	  } catch (e) {
		  return require("@/views/img/xxx/xx01.png");
		  //图片找不到时，使用默认图片
	  }
    },