前端判断img图片未能正确加载时显示一个默认图片。img标签onerror事件设置了本地默认图片还是不显示的问题

前端img标签中引用后端交给的图片地址时，有可能这个路径下图片被删除或者损坏了，那么页面在加载img图片时就显示为，太丑了。

img标签有个onerror事件，就是当图片未被正确加载的时候调用此事件，写的时候在onerror事件里写上默认图片的路径
html：

<img :src="`${baseUrl}/api/uploadv/showcms?fjid=${item.FJID}`" alt="" @error="setDefaultImage" />

 methods:

setDefaultImage(event) {
  event.target.src = require("@/assets/images/default.svg");
},

在vue项目中使用require()来引入静态资源图片才会被正确显示。

在 Vue 的模块化开发中，使用 require 来引入静态资源可以让构建工具正确地处理资源路径，并将其打包到最终的输出文件中。

当使用 require("@/assets/images/default.svg") 时，webpack 或其他构建工具会根据配置将该路径解析为正确的相对路径，并将默认图片文件包含在最终的构建结果中。这样，在浏览器中加载页面时，就能正确地找到并显示默认图片。

相比直接使用相对路径或绝对路径，使用 require 可以更好地适应模块化开发和构建工具的要求，确保资源路径的正确性。