Vue项目中引入ELementUI图片显示不出来换成默认图片

最新推荐文章于 2024-06-21 16:53:38 发布
最新推荐文章于 2024-06-21 16:53:38 发布
阅读量1.7k 收藏 5
点赞数 1
分类专栏： vue 文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45632659/article/details/124741572
版权

从服务器获取到的图片URL有问题，展示出来的是这样的

看上去不太好看，想换成一个默认图片，百度了好几个方法只有这一个成功了，哈哈我好菜

先看效果图:

看着舒服多了，哈哈。上代码：

img标签中写

:οnerrοr="defaultImg"

data中写

// 服务器返回的图片显示不出来时换成默认的图片
defaultImg:'this.src="' + require('../../../assets/error.png') + '"'

臭弟弟_王小屁
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
element upload预览_element-ui上传组件图片默认不上传显示图片缩略图
weixin_33524408的博客
12-30 3067
新入职公司，新团队实训练手项目，后端没有提供单独的图片上传接口，需要用form/data 形式表单字段和图片文件一起提交，element UI 的上传组件默认需要启用action。在选取图片文件后为了不让它默认上传，可以在upload组件加上 :auto-upload: "false" 属性class="upload-poster"action="https://jsonplaceholder.t...
vue图片img加载失败显示自定义默认图片(缺省图)
qq_39695210的博客
10-09 2883
vue图片img加载失败显示自定义默认图片(缺省图)
vue动态加载图片--图片不存在时，显示默认图片
u010671652的专栏
10-16 4585
vue动态加载图片–图片不存在时，显示默认图片 一、背景 显示课程信息时，需要根据courseId为每一门课程绑定相应的课程图片。课程图片放在前端/src/assets/picture/course中。使用require导入图片时，若图片不存在，页面出现error，显示模块找不到。 二、初始的动态绑定方式 1、图片存放目录 2、script代码使用计算属性计算图片路径 export defaul...
elementUI 使用el-image图片组件的问题
最新发布
weixin_39725702的博客
06-21 110
elementUI组件，使用el-image有时候加载不出图片，显示了默认图
VUE：img标签加载图片失败时，显示一张自定义默认图片
干饭搬砖两不误。
07-29 1万+
关于img标签加载图片失败时，显示一张自定义的默认图片
vue中 显示默认图片
alo_ne的博客
04-09 1010
element组件 <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
elementui upload组件, 从服务端获取图片数组进行显示
youwe1_的博客
08-16 404
el-upload 渲染后端返回的图片列表
使用element-UI的走马灯时，图片无法显示的问题
weixin_44153357的博客
02-25 7216
博主在初次使用elementUI的走马灯时，发现循环渲染时，dom和src都能拿到，图片就怎么都加载不了，经过N++次的试验后中终于发现要在data中按需引入url 比如[{url:require(…/asset/carousel1.jpg)}],然后就没有问题了 ...
element ui el-table 无数据时显示默认空图片(el-empty)
liubangbo的专栏
07-07 8698
当获取后台数据为空时，列表显示默认空图片，不正确姿势： 发现el-empty 默认空图片一直显示不出来，还以为el-empty用法有问题，弄了个空页面，直接加载el-empty 发现没有问题。查了一下原来el-table 数据为空时，显示默认图片写法不对，正确姿势如下： 这样就能正常显示el-emtpy 默认空图片了。...
使用Vue自定义指令设置默认图片
qq_33816425的博客
06-15 728
Vue自定义指令实现默认图片显示
图片不存在的时候，显示一个默认图片.rar
07-04
介绍： 通过这个方法，就可以实现当没有图片或图片丢失的情况，显示一个默认图片。以后，不用通过程序来判断图片是否存在了。嘿嘿~
图片不存在的时候，显示一个默认图片
07-27
图片不存在的时候，显示一个默认图片! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net
关于vue+element的图片显示功能（路径是从数据库获取的）
热门推荐
a1550290560的博客
06-27 2万+
首先来看效果图 再来看代码 html部分 <el-popover placement="right" trigger="hover"> <img :src= url style="width: 500px;height: 400px"> <img slot="reference" :src=url style="width: 300px...
elementui图片缩略图，选择图片后不上传到服务器
坚持原创
09-04 2360
<el-upload action="#" list-type="picture-card" :auto-upload="false"> <i slot="default" class="el-icon-plus"></i> <div slot="file" slot-scope="{file}"> <img class="el-upload-list__item-thumbnail" :src="file.ur.
vue.js 设置默认图片
zhoujianjava的博客
09-05 1701
设置默认图片 若图片不存在则替换
vue解决图片加载失败显示默认图片的方法
u010007013的博客
06-19 1万+
代码如下： defaultImg.js: function install(Vue, options = {}) { /** * 检测图片是否存在 * @param url */ let imageIsExist = function (url) { return new Promise((resolve) => { var img = new Image(); img.onload = function () { if (th
HTML中图片不存在，显示默认图片
远方
09-13 1万+
一个图片链接&lt;img src="" /&gt; 想用js 判断url是否有效如果404 就加载默认的图片路径 &lt;img src="xxx" onerror="this.src=默认图地址"/&gt; 图片标签img的 onerror事件 &lt;img src="pic.gif" onerror="javascript:this.src='默认图地址';&quo
【HTML/JS】图片不存在时，显示一个默认的图片
能看代码的CrackLibby
11-21 2517
http://www.oschina.net/code/snippet_76860_6032 [1].[代码] img标签src对应的图片不存在，显示一个默认的图片 [2].[代码] [CSS]引用“何世友@PoQoP”童鞋的方案 t = document.getElementsByClassName("defaultImg"); for(i = 0; i < t.
vue项目引入elementui后不显示内容
06-06
如果您的 Vue 项目引入 ElementUI 后不显示内容，可以尝试以下几个步骤： 1. 确认是否已安装 ElementUI 包，并在 main.js 中引入了 ElementUI。 2. 确认是否在组件内正确使用了 ElementUI 的组件，例如 `...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值