经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » HTML5 » 查看文章
vue中对于图片是否正常加载的思考
来源:cnblogs  作者:wangnima666  时间:2019/8/20 8:52:14  对本文有异议

问题:由于业务需要,我们需要判断图片能否正常的加载,如果未正常加载的话,需要显示一张默认图片;

方案:1,由于后台返回的是一个图片id数组,例如 imgList=['343313131','21333413244','3312w232211'],图片的完整路径应为http://公司服务器地址/xxxx/read?fileId='图片id',可以看成一个请求,先对图片的src请求一次,如果请求成功,返回的结果(res)data里面应该是一串二进制乱码,如果返回的结果中data属性里面有code,值不为0,则说明图片是无效的。

           2,onerror事件此时传入当前的元素并修改src

      

实施方案: 第一种方案

  1. /*图片检验2*/
  2. //that为传入的img数组
  3. //name为属性名字例如[{id:'343313131'}],此时name就为'id';
  4. //apiBaseUrl 为域名
  5. //fileConfigServer 为读取路径
  6. //imgSrcPath 为参数名例如 '?fileId='
  7. import axios from 'axios';
  8. Vue.prototype.testImg2 = function(that, name) {
  9. function* change() {
  10. for(let j=0;j<that.length;j++){
  11. let result = yield ajax(j);
  12. }
  13. let result = yield ajax();
  14. }
  15. var newchange = change();
  16. function ajax(i){
  17. axios({
  18. method: 'post',
  19. url: apiBaseUrl + fileConfigServer + imgSrcPath + that[i][name]
  20. }).then(res => {
  21. that[i][name] = res.data.code ? false : apiBaseUrl + fileConfigServer + imgSrcPath + that[i][name];//(1)
    console.log(res); //打印结果
  22. newchange.next();
  23. }).catch(err => {
  24. console.log('失败')
  25. })
  26. }
  27. newchange.next();
  28. }

结果:打印res如下:

         

     第一个为显示不正常的,data中返回了data相关字段code为-1,第二个为显示正常的data的值为二进制代码

  1. 1)中即为如果返回有code 则将图片的id值记为falsevue界面可采用 v-if来显示正常图片与加载失败的图片
    问:这里为什么采用yiled
    答:因为是异步请求,无法判定第几个先返回,但为了保证之前的顺序,所以在请求完成的时候调用next进行下一次请求,也可以采用






    方案二,方案二是比较简单的
    直接给图片绑定error事件即可,例如:
  1. //html中
  2. <img @error="handleError($event)"/>
  3. //methods中:
  4. handleError(e){
  5. e.currentTarget.src="默认图片地址"
  6. }

      方案二注意:1,如果图片是循环出来的用这种方案是没有问题的,注意火狐可能不兼容onerror事件,可以采用背景图片代替

                            2,如果图片单独的不是循环出来的,比如封面之类的,加入logo来自于后台 ,即src是动态的建议如下:

                        

  1. //html中
    <img v-if="imgurl" :src="imgurl"/>
    //js中 请将imgurl初始值赋值为null


                           这样做的原因:html会优先解析img元素会被创建,而此时imgurl还在请求中值不存在,此时就会触发onerror事件,如果加v-if,html不会解析img标签,当然元素不会创建。

 

原文链接:http://www.cnblogs.com/tony-stark/p/11377242.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号