精华内容
下载资源
问答
  • 动态加载图片失败时,显示默认图的2种方案查了一下img onerror文档和img onload文档,发现导致前端最终图片加载失败的情况会比较多,纯靠后端来解决很麻烦。而这两个方法从不同的方向都能解决无破裂图的效果。前者是...

    经常碰到这类场景,动态加载图片时,因为一些原因(图片链接不存在啊,图片误删啊,图片路径不对或图片路径为空等等)导致真实图片显示不出来。那么为了提高用户体验,都会显示一个默认图。

    动态加载图片失败时,显示默认图的2种方案

    查了一下img onerror文档和img onload文档,发现导致前端最终图片加载失败的情况会比较多,纯靠后端来解决很麻烦。而这两个方法从不同的方向都能解决无破裂图的效果。前者是从图片加载失败的角度入手,后者这是从加载完成(就是能正常加载)的角度入手。

    1. 利用onerror方法更改img的src为默认图片路径。

    示例代码:

    优点:1、无需添加额外的标签;

    缺点:1、默认图加载失败时,破裂图仍旧存在。2、统一网站不同尺寸比例的图片可能需要多个尺寸的默认图。

    2. 利用onerror方法更改img的样式display:none;,让img标签本身不可见。

    示例代码:

    优点:1、完美解决无破裂图;2、多尺寸比例的图片时,可能一个默认图就可以

    缺点:1、需添加额外的标签。

    3. 利用onload方法更改img的样式display:inline-block;,让img标签显示(一开始隐藏img标签)。

    示例代码:

    优点:1、完美解决无破裂图;2、多尺寸比例的图片时,可能一个默认图就可以

    缺点:1、需添加额外的标签。

    个人推荐方案二和方案三。

    ps:onerror方法里一般都会带this.onerror = null;,这是为了防止onerror方法造成的死循环导致内存溢出。假如正常图片加载失败,那么src会换成默认图的url,如果默认图也加载失败,又会加载默认图,一直循环下去。this.onerror = null;等于重置了onerror方法,从而达到只执行一次的目的。

    测试的浏览器:IE9,IE10,edge,chrome83.0.4103.116,Firefox76.0.1,Opera68.0.3618.173,Safari13.1.1 (15609.2.9.1.2)。(其实方案二在最新浏览器版本基本都没破裂图了)

    附上测试的效果图:

    效果图.png

    最后,附上以上方案的调试源码:

    样图:

    img-default.png

    test.png

    图片加载失败,去掉默认的破裂图

    /* reset.css start*/

    html {

    -webkit-text-size-adjust: 100%;

    -ms-text-size-adjust: 100%;

    font-size: 62.5%;

    }

    body {

    width: 100%;

    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC","Helvetica Neue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif;

    font-size: 1.4rem;

    line-height: 2.5rem;

    color: #000;

    }

    body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {

    margin: 0;

    padding: 0;

    }

    abbr, img, object, a img, :link img, :visited img, a object, :link object, :visited object {

    border: 0;

    }

    address, caption, cite, code, dfn, em, th, var, i {

    font-style: normal;

    font-weight: normal;

    }

    /* reset.css end*/

    /*develop css start*/

    .container{

    padding: 30px;

    }

    /*加载图片异常*/

    .errorimg{

    letter-spacing: -1em;

    margin: 0 auto;

    padding: 10px;

    min-height: 120px;

    }

    .errorimg .item,

    .errorimg img{

    display: inline-block;

    letter-spacing: normal;

    margin: 10px;

    width: 200px;

    height: 120px;

    border: 1px solid #a7a1a1;

    overflow: hidden;

    }

    .errorimg2{

    letter-spacing: -1em;

    margin: 0 auto;

    padding: 10px;

    min-height: 120px;

    }

    .errorimg2 .img{

    display: inline-block;

    letter-spacing: normal;

    margin: 10px;

    width: 200px;

    height: 120px;

    border: 1px solid #a7a1a1;

    overflow: hidden;

    background: url("img/img-default.png") no-repeat center;

    background-size: cover;

    }

    .errorimg2 .img img{

    width: 200px;

    height: 120px;

    }

    .errorimg2.type3 .img img{

    display: none;

    }

    动态加载图片

    分类

    正常图片链接:
    img/test.png
    拿不到图片的链接:
    img/test-no.png
    默认图片链接:
    img/img-default.png
    拿不到默认图片的链接:
    img/img-default-no.png

    onerror加载默认图片方案

    onerror隐藏img标签方案

    onload显示加载完成的图片

    $(function () {

    function loadImgs() {

    //动态加载图片(onerror加载默认图片方案)

    var html = '';

    html += '';

    html += '';

    html += '';

    html += '';

    $('#test').append(html);

    //动态加载图片(onerror隐藏img标签方案)

    var html2 = '';

    html2 += '

    ';

    html2 += '

    ';

    html2 += '

    ';

    html2 += '

    ';

    $('#test2').append(html2);

    //动态加载图片(onerror隐藏img标签方案,onload显示正常图片)

    var html3 = '';

    html3 += '

    ';

    html3 += '

    ';

    html3 += '

    ';

    html3 += '

    ';

    $('#test3').append(html3);

    }

    loadImgs();

    });

    展开全文
  • 最近遇到了个问题,用v-bind动态绑定imgsrc,图片加载不出来。控制台显示src是有获取到图片地址,可是就是加载不出来。最后才发现原因原来是浏览器中直接显示'./img/img1.png',也就是没有经过编译步骤,直接...

    7ab1284061ecae22993220810eb05b49.png

    ac52593984d3a7223564483c76543d44.png

    最近遇到了个问题,用v-bind动态绑定img的src,图片加载不出来。控制台显示src是有获取到图片地址的,可是就是加载不出来。

    最后才发现原因原来是浏览器中直接显示'./img/img1.png',也就是没有经过编译的步骤,直接将获取到的数据当作字符串显示。

    解决方法:

    1.在当前界面全局import图片地址

    //使用import引入

    import img1 from './img/img1.png'

    import img2 from './img/img2.png'

    export default {

    data() {

    return {

    imgList[

    {

    id: 0,

    imgUrl: img1

    },

    {

    id: 1,

    imgUrl: img2

    }

    ]

    }

    }

    }

    在Html中使用

    2.使用require

    用第一种方法可能会很繁琐,数据多的时候就不好一个一个import了,此时用require动态加载

    getImage() {

    this.imgList.forEach(item => {

    item.imgUrl = require('./img/' + item.name + '.png')

    })

    }

    data里的数据(此方法就不用再import啦)

    data() {

    return {

    imgList[

    {

    id: 0,

    name: 'img1',

    imgUrl: ''

    },

    {

    id: 1,

    name: 'img2',

    imgUrl: ''

    }

    ]

    }

    }

    以上方法就可以解决图片动态绑定后不能显示的问题啦,视频同理哟!

    总结

    以上所述是小编给大家介绍的解决Vue动态加载本地图片问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

    如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

    展开全文
  • 动态返回数据,回显图片加载失败,使用了懒加载也不行,异步加载没有刷新 解决: 使用v-if,图片存在时再渲染 <el-image style="width: 100px; height: 100px" lazy v-if="add_form_dialog.img" :src=...

    在这里插入图片描述

    问题:

    动态返回的数据,回显图片加载失败,使用了懒加载也不行,异步加载没有刷新

    解决:

    使用v-if,图片存在时再渲染

    		<el-image
                style="width: 100px; height: 100px"
                lazy
                v-if="add_form_dialog.img"
                :src="add_form_dialog.img"
                :preview-src-list="[add_form_dialog.img]"
              >
              </el-image>
              <span v-else>加载中...</span>
    
    展开全文
  • swiper缩略图展示的时候必须要保证全部dom挂在完毕,$nextTick就是保证在所有图片加载完毕之后执行的函数 当swiper需要展示的图片数量小于3个时,就会出现各种奇妙的错误,为解决这个问题需要在初始化swiper的时候...
    • swiper缩略图展示的时候必须要保证全部dom挂在完毕,$nextTick就是保证在所有图片加载完毕之后执行的函数
    • 当swiper需要展示的图片数量小于3个时,就会出现各种奇妙的错误,为解决这个问题需要在初始化swiper的时候加上watchOverflow: true,同时官网文档要求loop:false虽然loop为false,但是实现的是依旧循环的效果
    • 以下代码可以写在获取完数据之后执行此函数
    this.$nextTick(()=>{
                var galleryThumbs = new Swiper(".gallery-thumbs", {
                  spaceBetween: 10,
                  slidesPerView: 2,
                  loop: false,
                  freeMode: true,
                  loopedSlides:2, //looped slides should be the same
                  watchSlidesVisibility: true,
                  watchSlidesProgress: true,
                  watchOverflow: true
                });
                var galleryTop = new Swiper(".gallery-top", {
                  spaceBetween: 10,
                  loop: true,
                  loopedSlides:2, //looped slides should be the same
                  navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev"
                  },
                  thumbs: {
                    swiper: galleryThumbs
                  },
                  watchOverflow: false
                });
              });
    
    展开全文
  • vue img动态src加载@别名图片失败问题

    千次阅读 2020-01-02 09:54:34
    vue img动态src加载@别名图片失败问题 问题由来: url-loader会把非根路径url解析为相对路径 加载@别名的动态src 使用require引入图片(ps:require后面只能是字符串而不能是变量) ...
  • __在下图所示Picture__Control中动态加入位图,位图文件位置保存在szBMP0(CString)中,Picture控件中创建m_PIC_BMP0变量,但是图片无法加载加载图片的句柄显示CXX0030无法计算表达式,加载图片失败,请大神解答...
  • 众所周知,每一个插件都有很多坑,比如说市面上比较火爆 图片浏览插件viewer,有js版本和jqery版本,尽管这两个版本不一样,但是大同小异. 话不多说直接上代码 HTML部分 <div style="min-height:180px;"> ...
  • 图片保存在本地,然后将其路径放入数据库,再取出来时候就会出现问题。 this.list[i].tpicture是图片的完整地址 即这种写法: src="…/assets/product.jpg"; imgSrc = require("…/assets/product.jpg") 这是...
  • 在vue中使用v-for循环动态加载图片,如果imgsrc为url链接地址时,图片可以显示出来;但是一旦换成本地静态图片资源,加载就出现了问题,图片碎裂,无法加载。 使用url链接时,图片正常动态加载: <template>...
  • 有个问题是数据类型中有图片,对于图片的加载失败我们需要做容错。一般我们的思路都是对img绑定error事件,替换该图片为一个默认的图片。但是error事件是不会冒泡的,我们渲染是动态的,我们不能delegate事件到body...
  • 首次加载时图片可以获取成功,再次加载失败,通过chrome调试发现img data-lazyload 属性没改变 调试时候发现了bug $.fn.imageLazyload = function(options) { var lazyloadApis = []; this.each(function() ...
  • 注意点:在 Creator 中,所有继承自 cc.Asset 类型都统称资源,如 cc.Texture2D, cc....2. 动态加载资源要注意两点,一是所有需要通过脚本动态加载的资源,都必须放置在resources文件夹或它子文件夹下。resourc...
  • 使用原生img标签,src用v-bind动态绑定本地url,由于图片放在了assets文件夹下,所以代码大致长这样: <template> <img :src="url"> </template> <script> //... data() { return {...
  • 此脚本将在B站专栏草稿中存储转发过的动态id以防止重复转发动态id已储存在本地和GitHub成员中 操作步骤 ★星 ↓↓ 叉本仓库 ↓↓ 填入COOKIE 进入获取Cookie用于登录Chrome浏览器: F12打开控制台 进入应用程序...
  • 首先描述一下功能 实现列表页动态加载 通过官方提供"下拉刷新和上拉刷新"及"图片...再次加载失败,通过chrome调试发现img data-lazyload 属性没改变 调试时候发现了bug $.fn.imageLazyload = function(opti...
  • 在项目开发中遇到这样功能,要求实现列表页动态加载功能,在实现过程中遇到一些小小插曲,下面小编给大家详细说明下解决方法:首次加载时图片可以获取成功,再次加载失败,通过chrome调试发现img data-lazyload...
  • 说一下bug首次加载时图片可以获取成功,再次加载失败,通过chrome调试发现img data-lazyload 属性没改变调试时候发现了bug$.fn.imageLazyload = function(options) {var lazyloadApis = [];this.each(function...
  • 中继器(repeat)应该算是Axure三大难点动态面板,函数,中继器中最难。网上能搜索不少关于中级器文章,在下狗尾续貂,希望能为大家带来一些新思路。 不想看内容朋友可以直接跳至文尾下载链接,顺便帮忙点...
  • from…引入一个名为B.js文件中数组(元素是对象格式),对象中属性中含有图片的URL地址,但是在img标签中(:src=“item.picture”)最后页面中图片并没有被加载出来,并且在控制台中看到只是一个空标签,...
  • 经过进一步研究我们把没有... 第二个是动态加载图片问题解决,我们通过查资料找到方法把bitmap加载进gradeview,用一个线程每次加载一个图片然后 把对应课程位置图标替换掉,最后实现了动态刷新网络图片。 ...
  • 下图中“上传图片”是js动态加载的,点击“上传图片”没有反应,是因为layui触发函数是先于动态加载的html代码,所以就会绑定失败。 解决方案: js代码: // 某段js代码,嵌入html代码 certificates_...
  • 图片不出来.div也有,但是图片路径是一个加载失败图片的路径.在你下拉条,拉到某个位置 ,某张图片才会加载出来.替换到以前图片的路径 首先说下思路. .你只需要让下拉条从页面最顶端一直往下拉.拉到底部就可以了..ps:...
  • CentOS 编译出来.so文件,用我.out在别人虚拟机上动态加载报错,如下图: ![图片说明]...但加载失败,自己环境加载没有问题(别人环境也试了装相同版本GCC也不行)
  • 返回失败了,失败原因不知道,往前追踪,发现new QPixmap(imagePath)后判断isNull()直接返回true,也就是加载的时候就已经失败了,但是从windows的资源管理中查看分明就是一张正常的图片。图片查看器也能正常打开它...
  • 最近遇到一个问题,以前没有深入了解过,就是用Glide加载网络图片时,如何能够动态的知悉加载的状态。 方法如下: 请求监听器与定制日志 如果你想使用编程办法跟踪成功和失败信息、跟踪应用中整体...

空空如也

空空如也

1 2 3 4 5 ... 9
收藏数 164
精华内容 65
关键字:

动态图片加载失败的图片