`

img标签src对应的图片不存在,显示一个默认的图片

 
阅读更多
img标签src对应的图片不存在,显示一个默认的图片
<img src="abc.JPG" onerror="this.src='default.JPG'" />


[CSS]的方案
<script type="text/javascript">
  t = document.getElementsByClassName("defaultImg");
  for(i = 0; i < t.length; i++){
      t.item(i).onerror = function(){
        this.src = "test.gif"
      }
    }
</script>
//采用 className 是为了更好的适应页面,不是每个img我们都要这样做的,甚至不同地方的img
//我们要显示不同的默认图片。(采用img同样做法)。
//采用id则是犯了错误,id 导致只会拿到第一个id相符的。
//此代码经过测试在 非IE 的browser上正常工作。
 
//为了兼容IE个废物,请使用以下代码:
 
<script type="text/javascript">
  t = document.getElementsByTagName("img");
  for(i = 0; i < t.length; i++){
      t.item(i).onerror = function(){
        if(this.id =="defaultImg"){
            this.src = "test.gif";
            this.onerror = null;
          }
      }
    }
</script>
分享到:
评论

相关推荐

    jsp 图片拖拽排序,img src自动改变

    在JSP页面中,图片通常通过`&lt;img&gt;`标签来显示,其`src`属性指向图片的URL。例如: ```html &lt;img src="path/to/image.jpg" alt="图片描述"&gt; ``` 当需要实现图片拖拽排序时,我们主要依赖于HTML5的`draggable`属性和...

    thinkphp5图片组件解决captcha_src()

    `captcha_src()` 和 `captcha_img()` 是ThinkPHP5框架中的两个重要函数,它们与图片验证码的生成和显示密切相关。本文将详细讲解这两个函数的工作原理以及如何在项目中正确使用它们。 `captcha_src()` 函数是用于...

    纯CSS图片流畅缩放显示详情代码,鼠标移到图片上后图片会缩小,同时下方显示产品的文字描述,兼容主流浏览器

    首先,要实现这种效果,我们需要创建HTML结构,包括一个用来显示图片的`&lt;img&gt;`标签和一个用于展示文字描述的`&lt;div&gt;`标签。`&lt;img&gt;`标签的`src`属性指向要展示的图片,而`&lt;div&gt;`标签则包含产品描述内容。 接着,我们...

    JS对img标签进行优化使用onerror显示默认图像

    此函数的目的是将触发onerror事件的img元素的src属性设置为一个默认图片的URL地址。同时,为了防止默认图片再次触发onerror事件,需要将img元素的onerror属性置为null,从而避免无限循环的问题。 下面提供一个具体...

    js鼠标悬停到图片上显示文字详情效果

    在网页中,我们可以为每张图片创建一个`&lt;img&gt;`元素,并为其添加一个数据属性,如"data-description",用于存储文字详情。例如: ```html &lt;img src="image.jpg" alt="图片描述" data-description="这是图片的文字...

    点击缩略图,显示大图片(用层显示)JS+CSS

    - 缩略图通常是一组 `&lt;img&gt;` 元素,每个元素都有一个对应的大型图片URL。我们可以为每个缩略图添加一个类,例如 `thumbnail`,并设置`data-*`属性来存储大图的URL。例如: ```html &lt;img src="thumbnail-image....

    Android WebView加载网页以及本地图片缓存问题

    在Android开发中,WebView是一个非常重要的组件,它允许我们在应用程序内部加载和显示网页内容,而无需离开应用。WebView不仅能够加载远程HTTP/HTTPS网址,还能处理本地HTML、CSS和JavaScript资源,极大地增强了应用...

    php正则提取html图片(img)src地址与任意属性的方法

    例如,示例中通过`preg_replace`函数将原始的src路径替换为新的路径,同时还可以去除图片的width和height属性,使图片以默认尺寸显示。 上述方法为开发者提供了一种通过PHP脚本快速处理HTML内容的手段,尤其适用于...

    vue中img src 动态加载本地json的图片路径写法

    本文将深入探讨如何在Vue中使用`img`标签的`src`属性动态加载本地JSON文件中存储的图片路径。 首先,重要的一点是,无论是本地JSON文件还是其中的图片URL,它们都应该放在`static`文件夹内。这是因为Vue CLI或...

    jquery hover图片放大特效鼠标滑过图片浮动层变大显示

    这通常包括一个`&lt;img&gt;`标签来展示原始图片,以及一个覆盖在图片上的浮动层(可以是`&lt;div&gt;`或者其他元素),这个浮动层将在鼠标悬停时显示放大的图片。例如: ```html &lt;img id="normalImage" src="原图URL" alt="原...

    jQuery选项标签切换手机图片代码.zip

    首先,HTML文件(如`说明.htm`)需要设置一个包含多个图片和选项标签的容器。每个选项标签对应一组图片,当用户点击标签时,对应的图片集将被显示。HTML结构可能如下: ```html &lt;li&gt;&lt;a href="#" data-slide=...

    鼠标悬停在图片上显示文字提示的特效代码

    `&lt;div&gt;`标签创建了一个隐藏的文字提示容器,`class`属性定义了样式类,`style`属性中`display:none`使得默认情况下提示信息不显示。 接着,我们用CSS(层叠样式表)来控制图片的样式以及文字提示的显示和隐藏。例如...

    jquery图片渐渐切换tab标签

    每个Tab是一个可点击的元素,通常是一个`&lt;a&gt;`标签,而图片则可以放在`&lt;div&gt;`或其他容器中,通过CSS隐藏或显示图片以实现切换。例如: ```html &lt;li&gt;&lt;a href="#tab1"&gt;图片1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#tab2"&gt;图片2...

    jQuery+CSS实现图片感应鼠标高亮显示当前图片

    在这里,我们需要创建两个CSS类,一个用于正常显示图片,另一个用于高亮显示。例如,可以定义一个`.normal`类,所有图片默认应用这个类,保持正常亮度;再定义一个`.highlight`类,用于给当前鼠标悬停的图片添加高亮...

    html列表标签

    图像标签是通过img标签实现的,src属性指定图片的地址,height和width属性指定图片的高度和宽度,border属性指定图片的边框宽度,alt属性指定图片的替代文本。 表格标签 表格标签是通过table标签实现的,border...

    TextView加载HTML文件显示图片

    对于图片,`TextView`默认不支持`&lt;img&gt;`标签,但我们可以通过自定义`WebViewClient`和`WebView`来实现这一功能,或者使用一些第三方库。 1. 使用`WebView`加载HTML图片: 可以利用`WebView`的完整HTML渲染能力,...

    jQuery响应式图片显示插件 - jQuery Picture

    同时,我们还需要一个`&lt;img&gt;`标签作为备选,以确保不支持`&lt;picture&gt;`元素的浏览器也能正常显示图片: ```html (max-width: 600px)"&gt; (min-width: 600px) and (max-width: 1000px)"&gt; &lt;img src="images/...

    ASP.NET图片浏览

    另外,考虑添加错误处理机制,如果图片文件不存在或加载失败,可以显示默认图片或者提示信息。 总的来说,"ASP.NET图片浏览"涉及到的知识点包括:ASP.NET Web应用程序开发环境的搭建、HTML和服务器控件的使用、后台...

    jquery hover显示图片详细介绍

    如果需要对多个图片进行此操作,可以稍微修改代码,使用类选择器代替ID选择器,并用`each`遍历所有需要处理的元素: ```javascript $(document).ready(function() { $(".image-hover").hover( function() { $...

    jQuery hover事件鼠标滑过图片半透明标题文字滑动显示隐藏-20130715

    这些图片应当与上述HTML结构中的`&lt;img&gt;`标签相对应,以便在网页中正确显示。 总之,通过结合使用jQuery的`hover`事件、CSS的动画效果以及合适的HTML结构,我们可以实现一个美观且互动的图片标题显示和隐藏功能。...

Global site tag (gtag.js) - Google Analytics