回答(19)

2 years ago

你問過一個(gè)只有HTML的解決方案......

/p>

"http://www.w3.org/TR/html4/strict.dtd">

Object Test

由于第一個(gè)圖像沒有使用不支持object的舊瀏覽器，因此它將忽略該標(biāo)記并使用 img 標(biāo)記 . 有關(guān)兼容性，請參見caniuse網(wǎng)站 . 截至2018年，這個(gè)元素得到了ie6的所有瀏覽器的廣泛支持 .

2 years ago

這對我很有用 . 也許你想用JQuery掛鉤事件 .

更新了jacquargs錯(cuò)誤保護(hù)

Updated: CSS only solution 我最近看到Vitaly Friedman演示了一個(gè)我不知道的優(yōu)秀CSS解決方案 . 我們的想法是將 content 屬性應(yīng)用于損壞的圖像 . 通常 :after 或 :before 不適用于圖像，但是當(dāng)它們重新應(yīng)用時(shí)'re broken, they' .

img:before {

content: ' ';

display: block;

position: absolute;

height: 50px;

width: 50px;

background-image: url(ishere.jpg);

正如小提琴所示，破壞的圖像本身并沒有被刪除，但這可能解決了大多數(shù)情況下沒有任何JS也沒有CSS的問題 . 如果您需要在不同位置應(yīng)用不同的圖像，只需區(qū)分一個(gè)類： .my-special-case img:before { ...

2 years ago

在Spring in Action 3rd Ed中找到了這個(gè)解決方案 .

Update: 這不是HTML唯一的解決方案... onerror 是javascript

2 years ago

img {

background-image: url('/images/default.png')

}

請務(wù)必輸入圖像尺寸以及是否要圖像平鋪 .

2 years ago

我認(rèn)為只使用HTML是不可能的 . 但是使用javascript這應(yīng)該是可行的 . Bassicly我們遍歷每個(gè)圖像，測試它是否完整，如果它的naturalWidth是零那么這意味著它沒有找到 . 這是代碼：

fixBrokenImages = function( url ){

var img = document.getElementsByTagName('img');

var i=0, l=img.length;

for(;i

var t = img[i];

if(t.naturalWidth === 0){

//this image is broken

t.src = url;

}

}

}

像這樣使用它：

window.onload = function() {

fixBrokenImages('example.com/image.png');

}

在Chrome和Firefox中測試過

2 years ago

If you're using Angular/jQuery then this might help...

Explanation

假設(shè) item 的屬性 url 可能為null，那么當(dāng)它出現(xiàn)時(shí)，圖像將顯示為已損壞 . 這會(huì)觸發(fā) onerror 屬性表達(dá)式的執(zhí)行，如上所述 . 您需要覆蓋 src 屬性，如上所述，但您需要jQuery來訪問您的altSrc . 無法使用vanilla JavaScript .

可能看起來有點(diǎn)hacky但是在我的項(xiàng)目上節(jié)省了一天 .

2 years ago

使用可以添加多個(gè)圖像的背景圖像 . 我的情況：image1是主圖像，這將從某個(gè)地方獲取(瀏覽器正在執(zhí)行請求)image2是在加載image1時(shí)顯示的默認(rèn)本 Map 像 . 如果image1返回任何類型的錯(cuò)誤，用戶將看不到任何更改，這將是干凈的用戶體驗(yàn)

2 years ago

angular2：

2 years ago

僅限HTML的解決方案，唯一的要求是您知道要插入的圖像的大小 . 不適用于透明圖像，因?yàn)樗褂?background-image 作為填充 .

我們可以成功使用 background-image 來鏈接在給定圖像丟失時(shí)出現(xiàn)的圖像 . 然后唯一的問題是破碎的圖標(biāo)圖像 - 我們可以通過插入一個(gè)非常大的空字符來刪除它，從而將內(nèi)容推送到 img 的顯示之外 .

img {

background-image: url("http://placehold.it/200x200");

overflow: hidden;

}

img:before {

content: " ";

font-size: 1000px;

}

This image is missing:

And is displaying the placeholder

僅限CSS的解決方案(僅限Webkit)

img:before {

content: " ";

background-image: url("http://placehold.it/200x200");

display: block;

width: 200px;

height: 200px;

position: relative;

z-index: 0;

}

This image is there:

This image is missing:

And is displaying the placeholder

2 years ago

一個(gè)簡單的img元素不是很靈活，所以我把它與一個(gè)圖片元素結(jié)合起來 . 這樣就不需要CSS了 . 發(fā)生錯(cuò)誤時(shí)，所有srcset都設(shè)置為回退版本 . 斷開的鏈接圖像未顯示 . 它不會(huì)加載不需要的圖像版本 . picture-element支持響應(yīng)式設(shè)計(jì)和瀏覽器不支持的類型的多個(gè)回退 .

2 years ago

無法確定將嘗試查看您的頁面的無數(shù)客戶端(瀏覽器) . 需要考慮的一個(gè)方面是電子郵件客戶端是事實(shí)上的網(wǎng)絡(luò)瀏覽器，可能無法處理這種棘手的問題......

因此，你應(yīng)該包括一個(gè)帶有DEFAULT WIDTH和HEIGHT的alt / text，就像這樣 . 這是一個(gè)純HTML解決方案 .

alt="NO IMAGE" width="800" height="350"

所以另一個(gè)好的答案會(huì)稍微修改如下：

我在Chrome中遇到了對象標(biāo)記的問題，但我想這也適用于此 .

你可以進(jìn)一步設(shè)置alt / text樣式非常大...

所以我的答案是使用帶有很好的alt / text后備的Javascript .

2 years ago

一個(gè)帶有 JQuery 的可調(diào)版本，在你的結(jié)尾加上這個(gè)文件：

$(function() {

$('img[data-src-error]').error(function() {

var o = $(this);

var errorSrc = o.attr('data-src-error');

if (o.attr('src') != errorSrc) {

o.attr('src', errorSrc);

}

});

});

并在您的 img 標(biāo)簽上：

2 years ago

如果您使用的是Angular 1.x，則可以包含一個(gè)指令，允許您回退到任意數(shù)量的圖像 . fallback屬性支持單個(gè)url，數(shù)組內(nèi)的多個(gè)url或使用范圍數(shù)據(jù)的角度表達(dá)式：

向角度應(yīng)用模塊添加新的回退指令：

angular.module('app.services', [])

.directive('fallback', ['$parse', function ($parse) {

return {

restrict: 'A',

link: function (scope, element, attrs) {

var errorCount = 0;

// Hook the image element error event

angular.element(element).bind('error', function (err) {

var expressionFunc = $parse(attrs.fallback),

expressionResult,

imageUrl;

expressionResult = expressionFunc(scope);

if (typeof expressionResult === 'string') {

// The expression result is a string, use it as a url

imageUrl = expressionResult;

} else if (typeof expressionResult === 'object' && expressionResult instanceof Array) {

// The expression result is an array, grab an item from the array

// and use that as the image url

imageUrl = expressionResult[errorCount];

}

// Increment the error count so we can keep track

// of how many images we have tried

errorCount++;

angular.element(element).attr('src', imageUrl);

});

}

};

}])

2 years ago

The above solution is incomplete ，它錯(cuò)過了屬性 src .

this.src 和 this.attribute('src') 不相同，第一個(gè)包含對圖像的完整引用，例如 http://my.host/error.jpg ，但該屬性只保留原始值， error.jpg

正確的解決方案

2 years ago

使用Jquery你可以做這樣的事情：

$(document).ready(function() {

if ($("img").attr("src") != null)

{

if ($("img").attr("src").toString() == "")

{

$("img").attr("src", "images/default.jpg");

}

}

else

{

$("img").attr("src", "images/default.jpg");

}

});

2 years ago

對于任何圖像，只需使用此JavaScript代碼：

if (ptImage.naturalWidth == 0)

ptImage.src = '../../../../icons/blank.png';

其中 ptImage 是 document.getElementById() 獲得的 標(biāo)記地址 .

2 years ago

谷歌把這個(gè)頁面扔到了“圖像后備html”關(guān)鍵字，但由于上述情況并非如此，我正在尋找“低于9”的“svg后備支持”，我繼續(xù)搜索，這就是我發(fā)現(xiàn)的：

這可能是偏離主題的，但它解決了我自己的問題，也可能對其他人有所幫助 .

2 years ago

除了Patrick's精彩的答案，對于那些正在尋找跨平臺(tái)角度js解決方案的人來說，在這里你去：

2 years ago

image.setAttribute('src','../icons/.png');

//check the height attribute.. if image is available then by default it will

//be 100 else 0

if(image.height == 0){

image.setAttribute('src','../icons/default.png');

}

總結(jié)

以上是生活随笔為你收集整理的java中img属性_如果html img的src属性无效，请输入默认图像？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。