javascript - 为什么我可以在 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 中获取图像，因为我想检查它是否已成功加载，否则显示自定义替代元素。

标签： javascripthtmlcsscors

Answer 1

You could use an event listener to check if the image is loaded.

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"