如果使用 javascript 或 jQuery 找不到源图像，如何显示图像标题
Posted
技术标签:
【中文标题】如果使用 javascript 或 jQuery 找不到源图像，如何显示图像标题【英文标题】：How to show image title if source image is not found using javascript or jQuery 【发布时间】：2021-09-23 02:07:07 【问题描述】：我想在图像损坏或在给定路径中找不到图像时显示图像标题。
到目前为止，我可以选择隐藏图像并将图像替换为默认图像
$('img').on("error", function()
$(this).attr('src', '/images/missing.png');
);
// Or, hide them
$("img").on("error", function()
$(this).hide();
);
但是，这不能满足我的要求。如果有人想在使用 javascript 或 jQuery 破坏图像时显示图像标题。请帮帮我。
【问题讨论】：
你想在哪里显示标题 使用 'alt' 属性来保存你想要的描述，它会显示你的信息以防图像由于某些故障而没有加载 - developer.mozilla.org/en-US/docs/Web/html/Element/img Ire Aderinokun 用❤写的文章：bitsofco.de/styling-broken-images 感谢您作为 cmets 分享您的想法，我已经破解了。谢谢 如果您想考虑一个简单的 HTML/CSS 解决方案，请查看这个 CodePen：codepen.io/aequalsb/pen/poPRdBo 基本上...您可以使用 CSS 对图像进行样式化，就好像它是一个容器...如果图像坏了，看起来像一个普通的“盒子” 【参考方案1】：使用replaceWith inside error 将您的图像标签替换为其他元素。
$('img').on("error", function()
var title = $(this).prop("title");
$(this).replaceWith("<span>" + title + "</span>");
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://***.com/testimg.jpg" title="Your title"></img>【讨论】：
【参考方案2】：$(document).ready(function()
$("img").on("error", function ()
$(this).attr("src", "https://lh3.googleusercontent.com/-bRgqJ3P_4k8/AAAAAAAAAAI/AAAAAAAAAjQ/eYIXbdyNxKM/photo.jpg?sz=48");
);
);<!DOCTYPE html>
<html>
<head>
<title>Try jQuery Online</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<img
src="/media/cc0-images/grapefruit-sl.jpg"
>
</body>
</html>【讨论】：
这没有回答 OP 的问题...... OP 专门询问如何显示“图像标题” 嗨 aequalsb，到目前为止，我可以选择隐藏图像并用默认图像替换图像 我不明白... OP 正在询问如何在链接断开的图像上“显示 IMG 标题”...而不是在链接断开的图像上“替换为默认图像”跨度> 【参考方案3】：我找到了一个简单的方法来做到这一点，我们唯一需要做的就是将图像添加到 Div 中，这样我们就可以获得图像的父 DIV Id，并将标题附加到这个父 div 使用以下代码。
var images = document.querySelectorAll('img');
for (var i = 0; i < images.length; i++)
images[i].onerror = function()
$("#"+this.parentElement.id).append(this.title)
this.style.display='none';
【讨论】：
以上是关于如果使用 javascript 或 jQuery 找不到源图像，如何显示图像标题的主要内容，如果未能解决你的问题，请参考以下文章
如果所选文件不是某种类型，则使用 JavaScript 或 JQuery 清除文件上传字段[重复]
如何使用 javascript 或 Jquery 使用文件系统或操作？
如果 div 没有 img 标签，则将“无图像”img 添加到 div（Javascript 或 Jquery）
如何使用 jquery 或 javascript 删除索引处的行？ [复制]