为什么我的图像只接受一些src属性而拒绝其他属性

Question

我有一个带有空src属性的图像标签，当用户点击它时，它会显示一个提示()，要求提供链接。一旦用户输入链接，如果图像无效(链接不在互联网上)，我希望浏览器显示"链接无效"，如果图像有效(链接指向互联网上现有的图像)，或者，如果用户单击"X"或"取消"，则默认情况下显示"在此处输入图像"。

这是我到目前为止的代码：

HTML

<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<img id="my-image" onclick="showImage()" src="" alt="ENTER IMAGE LINK">

JAVASCRIPT/JQUERY

$(function() {
$("#my-image").resizable();
});
function showImage() {
let imageLink = prompt('Enter Image Link (Click "Cancel" to remove image):');

if (imageLink === null) {
document.getElementById("my-image").alt = 'ENTER IMAGE LINK';
document.getElementById("my-image").removeAttribute("src");
return;
}
$('img[id$=my-image]').load(imageLink, function(response, status, xhr) {
if (status === "error") {
document.getElementById("my-image").alt = 'LINK INVALID';
document.getElementById("my-image").removeAttribute("src");
return;
}
else {
document.getElementById("my-image").alt = 'LINK VALID';
$("#my-image").attr('src', imageLink);
}
});
}

代码工作正常，但只有一个问题，浏览器只接受某些链接。我的意思是，一些链接被成功显示，而另一些则被替换为alt属性"链接无效"，尽管我直接从网络上复制和粘贴了它们，并使它们在另一个测试脚本中工作，该脚本只显示图像而不更改alt属性。我对这个代码做了很多修改，我很确定这一行是导致我的问题的原因：

document.getElementById("my-image").removeAttribute("src")

但我真的不明白它出了什么问题，所以我不知道如何修复它

以下链接无效：https://www.sciencemag.org/sites/default/files/styles/article_main_large/public/cc_iStock-478639870_16x9.jpg?itok=1-jMc4Xv

此项有效：https://upload.wikimedia.org/wikipedia/commons/thumb/f/f7/CabbageTreeKaihoka.jpg/1200px-CabbageTreeKaihoka.jpg

Answer 1

您正被AJAX同源策略所困扰。.load()使用AJAX，除非服务器明确允许跨源请求，否则AJAX仅限于同一域。此策略不适用于映像src。

解决方法是将图像的src属性设置为新的URL，并处理加载图像失败时发生的error事件。

$("#my-image").on("error", function() {
$(this).removeAttr("src").attr("alt", "LINK INVALID");
});
function showImage() {
let imageLink = prompt('Enter Image Link (Click "Cancel" to remove image):');
if (imageLink === null) {
$("#my-image").removeAttr("src").attr("alt", "ENTER LINK");
return;
}
$('#my-image').attr('src', imageLink);
}
$("#show").click(showImage);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="my-image" alt="ENTER LINK">
<button id="show">Enter link</button>