200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > 前端判断img图片未能正确加载时显示一个默认图片。img标签onerror事件设置了本地默认

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

时间:2023-05-09 12:12:19

相关推荐

前端判断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可以更好地适应模块化开发和构建工具的要求,确保资源路径的正确性。

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。