Ionic 图片加载出错处理

心已赠人 2022-05-11 09:18 217阅读 0赞

参考资料: [html5没有图片，就默认一张][html5]

<!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript">
      function nofind() {
        var img = event.srcElement;
        alert("没有图片,我就默认一张");
        img.src = "https://www.baidu.com/img/bd_logo1.png";// 百度图片的地址
        img.onerror = null;// 控制不要一直跳动
      } 
    </script>
    </head>
    
    <body>
      <img src="/images/不存在图.jpg" alt="北京" title="北京" onerror="nofind();">
    </body>
    
    </html>

但是在Ionic中的写法如下：

<img src="./assets/img/point-39-x.png" alt="无相片" (error)="noPicture($event)" />

注意写法是：**  (error)="noPicture($event)" **

private noPicture(event): void {
            var img = event.srcElement;
            alert("没有图片,我就默认一张");
            //img.src = "https://www.baidu.com/img/bd_logo1.png";// 百度图片的地址
            img.src = "./assets/img/no-picture.png";
            img.onerror = null;// 控制不要一直跳动
        }

[html5]: https://blog.csdn.net/milijiangjun/article/details/78180025

发表评论取消回复

表情：

评论列表（有 0 条评论，217人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue指令处理图片加载错误，判断图片可否加载成功

vue指令处理图片加载错误，判断图片可否加载成功 v-real-img 指令全局注册自定义指令，用于判断当前图片是否能够加载成功，可以加载成功则赋值为img

超、凢脫俗/ 2022年11月17日 13:47/ 0 赞/ 620 阅读

相关 uni 页面加载完毕_uni-app图片未加载完处理

实现效果 1.图片未加载完看到的是 .new-img占位背景图片,.new\_back透明度设置0; 2.图片加载失败显示设置的 loadImg 失败占位图片 3.图片加

谁借莪１个温暖的怀抱￠/ 2022年10月26日 14:06/ 0 赞/ 515 阅读

相关 ionic之$ionicLoading实现加载动画

我是代码 //触发函数 $scope.test= function () { //弹出缓冲提示

谁践踏了优雅/ 2022年07月19日 05:12/ 0 赞/ 228 阅读

相关 ionic之上拉加载更多

我是代码 controller代码 .controller('articlePageCtrl', ['$scope', '$stateParams', '$io

柔光的暖阳◎/ 2022年07月19日 02:42/ 0 赞/ 231 阅读

相关 ionic 加载动作$ionicLoading 和加载动画 ion-spinner

一、ion-spinner使用 ionSpinner 提供了许多种旋转加载的动画图标。当你的界面加载时，你就可以呈现给用户相应的加载图标。该图标采用的是SVG。

淡淡的烟草味﹌/ 2022年07月12日 04:29/ 0 赞/ 174 阅读

相关 ionic 加载动作$ionicLoading 和加载动画 ion-spinner

一、ion-spinner使用 ionSpinner 提供了许多种旋转加载的动画图标。当你的界面加载时，你就可以呈现给用户相应的加载图标。该图标采用的是SVG。

骑猪看日落/ 2022年07月12日 04:29/ 0 赞/ 240 阅读

相关图片加载

[Android四大图片缓存（Imageloader,Picasso,Glide,Fresco）原理、特性对比][Android_Imageloader_Picasso_Gl

川长思鸟来/ 2022年06月08日 07:30/ 0 赞/ 370 阅读

相关图片懒加载

<!--<me

亦凉/ 2022年05月23日 12:19/ 0 赞/ 506 阅读

相关 Ionic 图片加载出错处理

参考资料: [html5没有图片，就默认一张][html5] <!DOCTYPE html> <html> <head> <meta htt

心已赠人/ 2022年05月11日 09:18/ 0 赞/ 218 阅读

相关 Ionic--lazyload懒加载知识总结

原文出处：[https://blog.csdn.net/CODING\_1/article/details/77264541][https_blog.csdn.net_CODI

水深无声/ 2022年05月11日 04:36/ 0 赞/ 305 阅读