Как сделать так, чтобы изображения из этого Waifu API отображались на странице?

Я немного застрял в этом Waifu API и хочу попросить о помощи.

Я могу получить теги JSON в консоли, и оттуда я могу перемещаться, щелкать изображение и видеть его. Но у меня возникают проблемы с форматированием его на странице при каждом щелчке.

Я знаю, что это глупый вопрос, я просто хочу рассмешить своих друзей на работе, но также УЗНАТЬ, ПОЧЕМУ ЭТО НЕ РАБОТАЕТ. :/

Спасибо за ваше время

<!-- ---waifuthingy----- -->

    <div id = "waifuContainer" class = "container mt-5 text-center">
        <h1 class = "display-5 text-warning" id = "dadJokeFont">Click for waifu:</h1>
        <button id = "waifuButton" class = "btn btn-warning mt-5">uWu</button>
        <div id = "waifuImage" >
            <img id = "waifus" src = "" alt = ""> </div>

    </div>

<!-- ----letmebe---- -->

// Waifu Image API


const waifuImage = document.querySelector('#waifuImage');
const waifuButton = document.querySelector('#waifuButton');

const makeImages = (waifus) => {
    for(let result of waifus) {
        const img = document.createElement('IMG');
        img.src.url = result.show.image.medium;
        document.body.append(img);
    }
}

waifuButton.addEventListener('click', () => {
    fetch('https://api.waifu.im/random')
        .then(res => res.json())
        .then(res => {
            console.info(res.images)
            waifuImage.src = res.url;
            waifus = waifuImage;
        })
        .catch(err=>console.info(err))
})

waifuImage — это div. тот, у которого есть атрибут src, — это waifus. Так и должно быть: document.querySelector('#waifus');

— 24.11.2022 18:27

javascript html css json

24.11.2022 18:17

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проблемы:

Вы пытаетесь установить src на div, а не img
Вы пытаетесь установить res.url, но у res нет URL. URL находится в res.images[0].url.

const waifuImage = document.querySelector('#waifus');
const waifuButton = document.querySelector('#waifuButton');

const makeImages = (waifus) => {
  for (let result of waifus) {
    const img = document.createElement('IMG');
    img.src.url = result.show.image.medium;
    document.body.append(img);
  }
}

waifuButton.addEventListener('click', () => {
  fetch('https://api.waifu.im/random')
    .then(res => res.json())
    .then(res => {
      waifuImage.src = res.images[0].url;
    })
    .catch(err => console.info(err))
})

#waifus {
  width: 100%;
  object-fit: contain;
}

<div id = "waifuContainer" class = "container mt-5 text-center">
  <h1 class = "display-5 text-warning" id = "dadJokeFont">Click for waifu:</h1>
  <button id = "waifuButton" class = "btn btn-warning mt-5">uWu</button>
  <div id = "waifuImage">
    <img id = "waifus" src = "" alt = "">
  </div>
</div>

24.11.2022 19:40