const url = "https://api.rawg.io/api/games/4200";
async function createGameDetails() {
const heading = document.querySelector("h1");
try {
const response = await fetch(url);
const info = await response.json();
heading.innerHTML = info.name;
const image = document.querySelector(".image");
image.innerHTML = info.background_image;
const description = document.querySelector(".description");
description.innerHTML = info.description;
} catch (error) {
heading.innerHTML = "error.";
console.log(error);
}
}
createGameDetails();.image {
height: 200px;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/question3.css" />
</head>
<body>
<div class="container">
<h1>Name of game</h1>
<div
class="image"
style="background-image: url('https://via.placeholder.com/1000');"
></div>
<div class="description">Description goes here</div>
</div>
<script src="js/question3.js"></script>
</body>
</html>我试图获取一个API响应，并在我的image div中用image类显示一个background_image，但它不会显示。我到底做错了什么？我把javascript、css和HTML贴在这里，以备有人能看看。我将非常感谢任何可能帮助我的答案。
你需要设置元素的背景图片样式而不是 innerHtml.
const url = "https://api.rawg.io/api/games/4200";
async function createGameDetails() {
const heading = document.querySelector("h1");
try {
const response = await fetch(url);
const info = await response.json();
heading.innerHTML = info.name;
const image = document.querySelector(".image");
//changed this line
image.style.backgroundImage = `url(${info.background_image})`;
const description = document.querySelector(".description");
description.innerHTML = info.description;
} catch (error) {
heading.innerHTML = "error.";
console.log(error);
}
}
createGameDetails();.image {
height: 200px;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/question3.css" />
</head>
<body>
<div class="container">
<h1>Name of game</h1>
<div class="image" style="background-image: url('https://via.placeholder.com/1000');"></div>
<div class="description">Description goes here</div>
</div>
<script src="js/question3.js"></script>
</body>
</html>将这一行:
const image = document.querySelector(".image");
image.innerHTML = info.background_image;
改为
const div = document.querySelector(".image");
const img = document.createElement("img");
img.src = info.background_image;
div.appendChild(img);
希望这个能用。