javascript - 图像 URL 在尝试用作背景样式时不起作用

Question

我正在从 Api 动态获取此图片链接，我正在尝试使用图片 url 作为页面的 backgroungImage 样式。

URL 看起来像这样:/ezXodpP429qK0Av89pVNlaXWJkQ.jpg

export default class View {
    constructor() {
        this.info = document.getElementById('header');
        this.backImage = document.getElementById('top');
    }

    showBack(img) {
        this.backImage.style.backgroundImage = `url(${img})`;

        this.img.innerHTML = `<div class="bottom" id="bottom">
       <img src="${img}" alt="">
        </div>
        `
    }
}

我遇到了这个错误

GET http://localhost:8080/ezXodpP429qK0Av89pVNlaXWJkQ.jpg 404 (Not Found)

我以前对其他 URL 使用过这种类似的技术，但这个没有用。

Answer 1

我可以看到 API 正在为您提供放置在 API 服务器或类似设备上的图像的相对 URL。所以需要获取图片的绝对url。例如考虑谷歌图片 url https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png .您正在获取 url 部分“/googlelogo_color_272x92dp.png”。由于图像位于谷歌服务器，您需要在前面加上 ' https://www.google.com/images/branding/googlelogo/1x/ ' 在您的网页中使用此图像时的部分。