`
weixing_fine
  • 浏览: 2388 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

html img标签 图片路径错误时显示默认图片方法

    博客分类:
  • html
阅读更多
方法一:
<div style="width:125px; height:90px; border:1px solid red; ">
<img src="errorSrc.gif" width="125" height="90"  onerror="this.src='http://cms.gdzjdaily.com.cn/img/emp2.gif'"/>
</div>

方法二:(新闻网这种做法)
<div style="width:125px; height:90px; border:1px solid red; background-image: url(http://cms.gdzjdaily.com.cn/img/emp2.gif); background-repeat: no-repeat; background-position: center center; background-color:#efefef;">
<img src=" errorSrc.gif " width="125" height="90"/>
</div>
分享到:
评论

相关推荐

    HTML 图片不存在则显示一个默认图片

    为了在图片加载失败时显示默认图片,我们可以利用`onerror`事件属性。当图片加载发生错误时,浏览器会触发`onerror`事件。我们可以为这个事件绑定一个处理函数,该函数在执行时会替换图片的`src`属性,使其指向默认...

    图片加载失败显示默认图片占位符方法

    效果描述: 我们都知道,当网页中加载的图片因为某种原因而加载失败的时候 浏览器会用图片的alt值代替当前图片位置 ... 然后故意将你的图片路径(src)指向一个错误地址,这个时候就会显示我们默认的图片

    图片不存在的时候,显示一个默认图片.rar

    在网页设计和开发中,有时候会遇到图片加载失败或者图片路径错误导致图片无法显示的问题。在这种情况下,一种常见的解决方案是设置一个默认图片,当实际图片无法加载时,自动显示这张默认图片,为用户提供友好的界面...

    用Javascript判断图片是否存在,不存在则显示默认图片的代码

    `onerror`事件会在图片加载失败时触发,我们可以在这里实现当图片不存在时显示默认图片的逻辑。`onload`事件则在图片成功加载时触发。 ### 利用HTTP状态码判断图片是否存在 除了监听事件之外,我们还可以使用...

    vue图片加载失败时用默认图片替换的方法

    我们可以利用这个事件,在图片加载失败时,用预设的默认图片替换原本应该显示的图片。以下是实现这一功能的步骤: 1. **定义默认图片**:在Vue组件的`data`选项中,声明一个变量,例如`defaultImg`,用来存储默认...

    图片显示,如何处理图片显示问题

    当图片无法正常显示时,常见的问题包括:图片路径错误、图片格式不支持、图片大小过大导致加载缓慢或失败等。解决这些问题的方法如下: 1. **检查图片路径**:确保`src`属性中的URL正确无误,包括相对路径和绝对...

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

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

    解决vue的 v-for 循环中图片加载路径问题

    - **错误处理**:添加错误处理机制,当图片加载失败时,可以显示默认图片或提示信息。 在实际开发中,确保图片正确加载并处理可能出现的问题是提高用户体验的关键。通过理解和解决这些问题,我们可以构建更加健壮的...

    微信小程序图片加载失败时替换为默认图片的方法

    为了提供良好的用户体验,当图片加载失败时,通常会将默认图片显示出来,以代替无法正常显示的图片。本文将详细介绍两种处理微信小程序图片加载失败并替换为默认图片的方法。 1. 单独加载一个图片 在微信小程序中,...

    Jsp中显示本地图片预览

    7. **错误处理**:当图片无法加载时,可以添加一个默认图片或者显示错误提示,增强用户体验。 8. **性能优化**:对图片进行压缩和优化,减少文件大小,可以使用工具如TinyPNG,或者在服务器端进行图片处理。此外,...

    javascript动态改变img的src属性图片不显示的解决方法

    总之,在使用JavaScript动态更改img的src属性时,应当注意不同浏览器的兼容性问题,特别是在旧版本的IE浏览器中,通过防止a标签的默认行为,可以有效地解决图片不显示的问题。同时,合理使用JavaScript和HTML的语义...

    jquery解决图片路径不存在执行替换路径

    在使用jQuery进行网页开发时,经常会遇到因为图片资源链接失效或不存在而导致网页上的图片无法正常显示的问题。...通过上述各种技术的组合使用,可以有效解决图片路径不存在时的替换问题,并优化整个图片加载的过程。

    kindeditor图片上传后生成带域名绝对路径配置及提交空格无法保存解决方法

    对于KindEditor而言,默认情况下上传图片时生成的路径可能不会包含完整的域名信息,这在某些场景下可能会带来不便。例如,当内容被嵌入到其他网站或服务器上时,没有域名的路径就可能导致图片无法正确加载。 #### ...

    图片路径中含有中文在jsp下不能正常显示的原因及解决

    如果图片路径中包含中文,如 "&lt;img src="/pic/lupload/img工行上传.jpg" /&gt;",在Web服务器(例如Tomcat)处理请求时,会将URL中的中文字符按照默认的字符编码进行编码。如果服务器的字符编码设置与创建URL时使用的...

    table合并单元格与img图片铺满整个td的html

    在部署网页时,需要确保文件的路径正确,以避免路径错误导致图片无法显示。 最后,为了提高代码的可读性和维护性,建议在编写HTML代码时,遵循良好的编程习惯,比如合理使用缩进,使用适当的注释等。尽管示例中的...

    Vue中错误图片的处理的实现代码

    总结来说,Vue.js中处理错误图片的两种方法,一是使用默认图片的路径作为img标签src的直接值,二是通过全局自定义指令来动态检测图片是否加载成功,并据此加载默认图片。在实际项目中,根据不同的需求选择合适的方法...

    HTML中的base标签 中文WORD版

    在这个例子中,所有相对路径的链接,如图片`&lt;img&gt;`的`src`属性,将会基于`&lt;base&gt;`标签设定的URL(即`http://static.cnblogs.com/`)进行解析。因此,原本相对路径`./images/logo_gray.gif`会被解析为`...

    HTML语言参考.rar_html_html 标记 语言_html 语法_html语言

    例如,`&lt;a&gt;`标签的`href`属性指定链接的目标,`&lt;img&gt;`的`src`属性指向图像文件路径,`alt`属性提供图像无法显示时的文本描述。 4. 块级元素与内联元素: 块级元素如`&lt;div&gt;`、`&lt;p&gt;`、`&lt;h1&gt;`等,它们默认占据一整行...

    完美兼容多浏览器的js判断图片路径代码汇总

    在现代网页开发中,...在使用这些方法时,还需要注意图片路径的正确性和服务器配置,确保图片资源可以被正常访问。此外,过多的图片加载失败处理也可能影响页面的加载性能,因此在生产环境中应当谨慎使用这些技术。

    struts1标签库知识

    - **`&lt;html:img&gt;`**:用于插入图片,可以通过`page`属性指定图片路径,并可通过`paramId`和`paramName`传入参数。 - **`&lt;html:link&gt;`**:创建超链接,支持相对路径和绝对路径,同时也可以通过`forward`属性指定全局...

Global site tag (gtag.js) - Google Analytics