1. 程式人生 > >html img src 圖片路徑不存在或無效

html img src 圖片路徑不存在或無效

html img src 圖片路徑不存在或者存在但是路徑無效無法正常加載出來的情況,動態替換成有效的預設圖片,解決辦法。

通常的判斷為:

if(pic==null){
 html='<img src="images/bg_test1.jpg" width="320" height="157" />';
 }else{
 html='<img src="'+pic+'" width="320" height="157" />';
}

但如果當src路徑存在,但路徑無效導致無法正常載入時,可以利用img 的 onerror 事件來解決:

 if(pic==null){
  html='<img src="images/bg_test1.jpg" width="320" height="157" />';
 }else{
  html='<img src="'+pic+'" width="320" height="157" onerror="imgerror(this)"

/>';
}

分析:特別注意 onerror,當圖片不存在時,將觸發 onerror,而 onerror 中又為 img 指定一個 NoPic.gif 圖片。也就是說圖片存在則顯示 pic.gif,圖片不存在將顯示 noPic.gif。但問題來了,如果 noPic.gif 也不存在,則繼續觸發 onerror,導致迴圈,故出現錯誤。

說明:如果圖片存在,但網路很不通暢,也可能觸發 onerror。

解決:可以在設定為預設圖片之後將 onerror 事件置空,避免死迴圈觸發。


function imgerror(img){
img.src="images/default.jpg";
img.onerror=null;   //控制不要一直跳動


}

相關推薦

html img src 圖片路徑存在無效

html img src 圖片路徑不存在或者存在但是路徑無效無法正常加載出來的情況,動態替換成有效的預設圖片,解決辦法。 通常的判斷為: if(pic==null){ html='<img src="images/bg_test1.jpg" width="320" h

html img Src base64 圖片顯示

大家可能注意到了,網頁上有些圖片的src或css背景圖片的url後面跟了一大串字元,比如:data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZ

前端html img src base64 的data 的型別引數

大家可能注意到了,網頁上有些圖片的src或css背景圖片的url後面跟了一大串字元,比如:data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBB

HTML img 重新整理圖片的問題

需要上傳圖片預覽.但是第二次上傳圖片顯示的時候發現之前的圖片沒有改變.後經過分析發現是地址相同第二次改變img src屬性的時候圖片未發生改變,瀏覽器第二次不會去請求伺服器。今天在做ajax上傳圖片時:由於新上傳的圖片會處理成和原來的圖片名稱一樣,這樣就造成img標籤的src

使用ueditor上傳圖片後,圖片路徑正確導致圖片能顯示

本人聽說Ueditor是一個不錯的富文字外掛,就去下載來用,結果配置完成,上傳圖片後,圖片一直不能正確顯示,圖片路徑是/ueditor/jsp/upload/image/20141204/1417677379602011197.jpg 後來一直找資料,居然沒找到一個答案,

html中關於圖片路徑的問題

伺服器控制元件就加“~/”可以了 如果使用的是HTML那麼我們可以在路徑上加“/”那麼就可以從根路徑寫起而不會出錯 例如:要使用根路徑下有一個資料夾 image,資料夾內有一個圖片叫aa.gif 那麼在使用伺服器控制元件來使用該圖片我們可使用“~/images/aa.gif

【菜鳥學安卓】- TextView 顯示Html 一 解決圖片顯示了的小問題

今天學習 TextView 顯示 html  但一直有一個問題就是圖片顯示不了 程式碼如下: ImageGetter imgGetter = new Html.ImageGetter() { public Drawable getDrawable(String so

img標籤src路徑變,讀取不同圖片時,圖片重新整理甚至顯示

問題描述: 1. Linux作業系統,weblogic伺服器下部署應用,IE9瀏覽器從伺服器取圖片顯示,相同src ,但圖片不同,第一次讀圖片,能夠顯示。當後一張圖片覆蓋前一張圖片後,再次讀取圖片,會

Aspose.Pdf pdf轉Html,並設置保路徑圖片路徑

embedded asp delete ntop ras using sin encoding sta using System.IO; using System.Text; using Aspose.Pdf; namespace System.Extensions {

php正則提取html圖片(img)src地址與任意屬性的方法

<?php /*PHP正則提取圖片img標記中的任意屬性*/ $str  =  '<center><img src="/uploads/images/2017020716154162.jpg" height="120" width="120"

PHP用正則批量替換Imgsrc內容,用正則表示式獲取圖片路徑實現縮圖功能

/** * 圖片地址替換成壓縮URL * @param string $content 內容 * @param string $suffix 字尾 */ function get_img_thumb_url($content="",$suffix="!c550x260.jpg") { // by

vue v-for img標籤的src 圖片顯示

1.可能是繫結的:key值不能是物件或者陣列 會報一下錯誤: [Vue warn]: Avoid using non-primitive value as key, use string/number value instead. <div class="banner">

php正則提取html圖片(img)src地址與任意屬性

簡單版:<?php header("Content-Type: text/html;charset=utf-8"); $str = '<div class="ui-block-a" align="center"> <a href="

html-jquery/js引用外部圖片時遇到看出現403情況解決方法

<script type="text/javascript"> function showImg(url) { var frameid = 'frameim

IE8.0 顯示本地圖片 img.src=本地圖片路徑無效的解決方案

IE8.0 顯示本地圖片 img.src=本地圖片路徑 是無效,只能通過div來完成 。 IE7,IE8是放在 <div id="imgPreview"></div>裡的。 JS程式碼:  function Preview(obj) {       

C# 將 HTML 轉換為圖片 PDF

ont gif completed 字段 sed pad cli 滾動條 lose 首先是把 HTML 轉換為圖片。 public partial class Form1 : Form { public Form1() {

webpack打包編譯時,識別src目錄以外的jscss

default con col class 簡單的 報錯 ons src expect 前端的dva項目開發時,遇到個很郁悶的問題,用es6的語法簡單的export一個變量出來,在其他js中import使用,結果就報錯了。 export寫法如下: 1 const

通過按鈕截取當前網頁成pngjpeg格式的圖片並保

jquer data 情況 ram ext class url head att <html xmlns="http://www.w3.org/1999/xhtml"><head> <script type="text/javascrip

關於SpringMvc中js和圖片路徑正確但是能加載的問題

pla margin host isp alt esp load width found   SpringMvc中,在沒有設置攔截特殊的請求時,會默認攔截所有請求,包括js和圖片等靜態請求,造成資源查詢失敗404錯誤(http://localhost:8080/SSHA/j

WPF調用圖片路徑資源圖片

統一 content 調用 表達 ati 訪問 rop 例子程序 簡單 原文:WPF調用圖片路徑,或資源圖片一、加載本項目的圖片WPF引入了統一資源標識Uri(Unified Resource Identifier)來標識和訪問資源。其中較為常見的情況是用Uri加載圖像。U