为什么我可以在HTML和CSS中访问跨原点图像，但不能在JS HTTP请求中访问?

Question

我有一个像这样的HTML img元素:

<img src="https://theposterdb.com/api/assets/11949" />

和像这样的CSS类:

div {
background-image: url(https://theposterdb.com/api/assets/11949);
}

这两个工作和显示我的网站上的图像。但是，当我尝试在JavaScript中执行以下操作时:

fetch("https://theposterdb.com/api/assets/11949")

得到一个CORS错误。为什么?我需要在JS中获取图像，因为我想检查它是否成功加载，否则显示一个自定义的替代元素。

Answer 1

您可以使用事件侦听器来检查图像是否已加载。

HTML

<img id="test">

JS

let test = document.querySelector("#test")
test.addEventListener("load",()=>console.log("image was loaded!"))
test.src = "https://theposterdb.com/api/assets/11949"