我通過復制鏈接文本以在 src attr 中設定檔案名來動態地將影像添加到鏈接中。如果沒有影像檔案與鏈接文本匹配，則顯示默認影像。
<a href="#">Argentina</a><br>
<a href="#">Brazil</a><br>
<a href="#">Colombia</a><br>
<a href="#">Peru</a><br>
<a href="#">Venezuelaaaaaaaaaa</a>
但是影像（數百個）可以是 jpg 或 jpeg - 我如何顯示 x.jpg 或 x.jpeg，如果兩者都找不到，則顯示 default.png？如果兩個影像都無法加載，可以再次使用 one rror嗎？
$("a").each(function() {
$("<img>").insertBefore(this).attr("src", "https://www.sciencekids.co.nz/images/pictures/flags680/" $(this).text() ".jpg").on("error", function() {
$(this).attr("src", "https://www.pocketfulofstones.co.uk/wp-content/themes/pocketful/img/ps_bottle_halo.png");
});
或者當檔案路徑/檔案名已知但檔案擴展名可能不同時，是否有更好的影像回退方法？src 可以包含兩個 URL 并顯示找到的那個嗎？多個背景影像不是一個選項，因為影像具有透明部分。
JSFiddle
uj5u.com熱心網友回復：
這是一個使用單獨的函式來確定下一步要嘗試的示例...
function tryNextImg(e) {
if ($(e.target).attr('src').split(".").slice(-1)[0] == 'jpg') {
// console.log(`try jpeg...`)
$(e.target).attr('src', $(e.target).attr('src').replace('.jpg', '.jpeg'))
} else {
// console.log(`use default...`)
$(e.target).attr('src', "https://www.pocketfulofstones.co.uk/wp-content/themes/pocketful/img/ps_bottle_halo.png");
}
}
$("a").each(function() {
let img = $("<img>").insertBefore(this);
img.on('error', tryNextImg)
img.attr("src", "https://www.sciencekids.co.nz/images/pictures/flags680/" $(this).text() ".jpg");
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#">Argentina</a><br>
<a href="#">Brazil</a><br>
<a href="#">Colombia</a><br>
<a href="#">Peru</a><br>
<a href="#">Venezuelaaaaaaaaaa</a>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/512433.html
下一篇：使用jq流提取值