java中img属性_如果html img的src属性无效，请输入默认图像？
回答(19)
2 years ago
你問過一個只有HTML的解決方案......
/p>
"http://www.w3.org/TR/html4/strict.dtd">
Object Test
由于第一個圖像沒有使用不支持object的舊瀏覽器，因此它將忽略該標記并使用 img 標記 . 有關兼容性，請參見caniuse網站 . 截至2018年，這個元素得到了ie6的所有瀏覽器的廣泛支持 .
2 years ago
這對我很有用 . 也許你想用JQuery掛鉤事件 .
更新了jacquargs錯誤保護
Updated: CSS only solution 我最近看到Vitaly Friedman演示了一個我不知道的優秀CSS解決方案 . 我們的想法是將 content 屬性應用于損壞的圖像 . 通常 :after 或 :before 不適用于圖像，但是當它們重新應用時're broken, they' .
img:before {
content: ' ';
display: block;
position: absolute;
height: 50px;
width: 50px;
background-image: url(ishere.jpg);
正如小提琴所示，破壞的圖像本身并沒有被刪除，但這可能解決了大多數情況下沒有任何JS也沒有CSS的問題 . 如果您需要在不同位置應用不同的圖像，只需區分一個類： .my-special-case img:before { ...
2 years ago
在Spring in Action 3rd Ed中找到了這個解決方案 .
Update: 這不是HTML唯一的解決方案... onerror 是javascript
2 years ago
img {
background-image: url('/images/default.png')
}
請務必輸入圖像尺寸以及是否要圖像平鋪 .
2 years ago
我認為只使用HTML是不可能的 . 但是使用javascript這應該是可行的 . Bassicly我們遍歷每個圖像，測試它是否完整，如果它的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
假設 item 的屬性 url 可能為null，那么當它出現時，圖像將顯示為已損壞 . 這會觸發 onerror 屬性表達式的執行，如上所述 . 您需要覆蓋 src 屬性，如上所述，但您需要jQuery來訪問您的altSrc . 無法使用vanilla JavaScript .
可能看起來有點hacky但是在我的項目上節省了一天 .
2 years ago
使用可以添加多個圖像的背景圖像 . 我的情況：image1是主圖像，這將從某個地方獲取(瀏覽器正在執行請求)image2是在加載image1時顯示的默認本 Map 像 . 如果image1返回任何類型的錯誤，用戶將看不到任何更改，這將是干凈的用戶體驗
2 years ago
angular2：
2 years ago
僅限HTML的解決方案，唯一的要求是您知道要插入的圖像的大小 . 不適用于透明圖像，因為它使用 background-image 作為填充 .
我們可以成功使用 background-image 來鏈接在給定圖像丟失時出現的圖像 . 然后唯一的問題是破碎的圖標圖像 - 我們可以通過插入一個非常大的空字符來刪除它，從而將內容推送到 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
一個簡單的img元素不是很靈活，所以我把它與一個圖片元素結合起來 . 這樣就不需要CSS了 . 發生錯誤時，所有srcset都設置為回退版本 . 斷開的鏈接圖像未顯示 . 它不會加載不需要的圖像版本 . picture-element支持響應式設計和瀏覽器不支持的類型的多個回退 .
2 years ago
無法確定將嘗試查看您的頁面的無數客戶端(瀏覽器) . 需要考慮的一個方面是電子郵件客戶端是事實上的網絡瀏覽器，可能無法處理這種棘手的問題......
因此，你應該包括一個帶有DEFAULT WIDTH和HEIGHT的alt / text，就像這樣 . 這是一個純HTML解決方案 .
alt="NO IMAGE" width="800" height="350"
所以另一個好的答案會稍微修改如下：
我在Chrome中遇到了對象標記的問題，但我想這也適用于此 .
你可以進一步設置alt / text樣式非常大...
所以我的答案是使用帶有很好的alt / text后備的Javascript .
2 years ago
一個帶有 JQuery 的可調版本，在你的結尾加上這個文件：
$(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 標簽上：
2 years ago
如果您使用的是Angular 1.x，則可以包含一個指令，允許您回退到任意數量的圖像 . fallback屬性支持單個url，數組內的多個url或使用范圍數據的角度表達式：
向角度應用模塊添加新的回退指令：
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 ，它錯過了屬性 src .
this.src 和 this.attribute('src') 不相同，第一個包含對圖像的完整引用，例如 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() 獲得的 標記地址 .
2 years ago
谷歌把這個頁面扔到了“圖像后備html”關鍵字，但由于上述情況并非如此，我正在尋找“低于9”的“svg后備支持”，我繼續搜索，這就是我發現的：
這可能是偏離主題的，但它解決了我自己的問題，也可能對其他人有所幫助 .
2 years ago
除了Patrick's精彩的答案，對于那些正在尋找跨平臺角度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');
}
總結
以上是生活随笔為你收集整理的java中img属性_如果html img的src属性无效，请输入默认图像？的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 双十一总成交额2684亿元 电商直播成
- 下一篇： 2022适合在农村开办的加工厂 可以考