当前位置:首页 > 编程教程 > vue技术文章 > vue中当图片地址无效的时候,显示默认图片的方法

vue中当图片地址无效的时候,显示默认图片的实现代码

  • 发布时间:
  • 作者:码农之家
  • 点击:93

这篇文章主要知识点是关于vue、图片地址无效、默认图片、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

前端工程师必备技能:Vue移动开发实战技巧
  • 类型:Vue实战大小:122 MB格式:PDF作者:李利德
立即下载

vue中当图片地址无效的时候,显示默认图片的方法

web项目中经常需要展示图片,很可能就会碰到图片地址无效的情况,比如图片地址不对,或者后台拿到图片地址后,该地址无效,或者数据库中没有该图片等情况。这时候,图片就会显示一个叉。

对于项目中出现的这种情况,我们也可以不做处理,但是比较影响美观,所以我们都会使用一个默认的图片来代替图片原来的地址。

<img :src="item.img" @error="imgError(item)" />

给图片添加一个error校验,当图片加载失效的时候,就会调用该属性的方法。

在methods中添加如下方法:

imgError(item) {
  item.img = require('../../assets/img-default.png');
}

在方法中修改图片的地址为默认图片的地址。

当前端通过接口从后台获取到图片的地址参数后,该参数很可能会为null,对于这种情况,我们应该做一个判断,如果该图片地址不存在,那么直接赋值一个默认的图片地址,如果该图片的地址存在,但是链接后没有获得图片,那么,这种情况就可以采用上述的方法进行完善。

以上这篇vue中当图片地址无效的时候,显示默认图片的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持码农之家。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

您可能感兴趣的文章:

  • 介绍vuejs使用FormData实现ajax上传图片文件的方法
  • vue-quill-editor上传内容由于图片是base64的导致字符太长的问题解决方案
  • 深入理解vue-lazyload图片延迟加载插件
  • vue 相关电子书
    学习笔记
    网友NO.232117

    介绍vuejs使用FormData实现ajax上传图片文件的方法

    我相信很多使用vuejs的朋友,都有采用ajax上传图片的需求,因为前后端分离后,我们希望都能用ajax来解决数据问题,传统的表单提交会导致提交成功后页面跳转,而使用ajax能够无刷新上传图片等文件。 其实已经有朋友封装了相关的npm包,但是我想说用原生的js api来实现,也用不了多少代码,而且更灵活,能使用原生就尽量用原生。接下来就以一个简单的头像上传来说明如何使用。 效果图 前端实现 template div class=admin div class=admin-content div class=edit div class=avatar div class=img img :src=avatar @click=setAvatar span更改/span /div input type=file name=avatar accept=image/gif,image/jpeg,image/jpg,image/png @change=changeImage($event) ref=avatarInput /div button type=button @click=edit确认修改/button /div /div /div/templatescriptexport default { data() { return { avatar: this.$store.state.administrator.avatar, } }, methods: { edit() { // 修改了……

    网友NO.896260

    webpack+vue中使用别名路径引用静态图片地址

    webpack 的别名好处大家也都了解, 但是 vue 的模板中, 对图片地址使用别名时总出现问题, 很久时间的时间都没找到解决办法, 一度认为是 webpack 的原因... alias: { 'src': path.resolve(__dirname, '../src'), 'assets': path.resolve(__dirname, '../src/assets'), 'components': path.resolve(__dirname, '../src/components')} template img src="assets/images/logo.jpg" //templatescriptimport 'assets/css/style.css'/scriptstyle.logo { background: url(asset/images/bg.jpg)}/style 上面的代码, 你会发现只有引入style.css是成功的, 图片地址和背景图片地址都会解析失败... 经过各种搜索找原因(这时候, 你会发现百度搜索这些技术型的内容, 真是垃圾中的战斗机), 最终还是找到原因了... vue-html-loader and css-loader translates non-root URLs to relative paths. In order to treat it like a module path, prefix it with ~ 就是要在别名前面加一个~ 最终代码写成: alias: { 'src': path.resolve(_……

    <
    1
    >

    Copyright 2018-2020 www.xz577.com 码农之家

    版权投诉 / 书籍推广 / 赞助:520161757@qq.com