Javascript. Отобразить изображение из ответа API выборки, но оно не будет отображаться. Что я делаю неправильно? - PullRequest
Новая
       21

Javascript. Отобразить изображение из ответа API выборки, но оно не будет отображаться. Что я делаю неправильно?

0 голосов
/ 25 апреля 2020 

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 и показать его background_image в моем изображении div с классом изображения, но это не покажет Что я делаю неправильно? Я публикую здесь javascript, css и HTML на случай, если кто-то может взглянуть. Я буду очень благодарен за любой ответ, который может помочь.

Ответы [ 2 ]

0 голосов
/ 25 апреля 2020

Вам нужно установить стиль фона элемента вместо 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>
0 голосов
/ 25 апреля 2020

Измените эту строку: 

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);

Надеюсь, это сработает.

...