javascript 如何将JS中的图像请求以HTML显示[已关闭]

lymnna71 于 2023-03-21 发布在 Java

关注(0)|答案(3)|浏览(162)

**已关闭。**此问题为not reproducible or was caused by typos。当前不接受答案。

这个问题是由打字错误或无法再重现的问题引起的。虽然类似的问题在这里可能是on-topic，但这个问题的解决方式不太可能帮助未来的读者。
13小时前关门了。
Improve this question
我正试图使一个口袋妖怪队发电机与pokeapi和我能够获取的文字信息罚款，但我不能想出一种方法来显示图像。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Java Script 201</title>



</head>

<body>
<img src="" id="monster">

<h3>Name:</h3>
<div id="name"></div>   
<h3>Height:</h3>
<div id="height"></div>
<h3>Weight:</h3>
<div id="weight"></div>    
<button class="button">Generate Pokemon Team!</button>

<script src="script.js"></script>

</body>


</html>

const name = document.getElementById("name");
    const pokemonImage = document.getElementById('pokemon')
    const height = document.getElementById("height");
    const weight = document.getElementById("weight");
    const button = document.querySelector(".button");
        button.addEventListener('click', (e) => {
            e.preventDefault()
    const randomNumber = Math.ceil (Math.random() * 905)
    fetch (`https://pokeapi.co/api/v2/pokemon/${randomNumber}/`)
        .then (response => response.json())
        .then (pokemon => {
                console.log(pokemon)
                name.innerHTML = pokemon ['name'];
                height.innerHTML = pokemon ['height'];
                weight.innerHTML = pokemon ['weight'];
                id.innerHTML = (`Pokemon Id: ${Pokemon['id']}`);

  pokemonImage.innerHTML =`<img id='monster' src=https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${Pokemon['id']}.png>`  
        })
    })

我试过使用ID，只是似乎找不到一个好的anwsxer在互联网上。

JavaScript

来源：https://stackoverflow.com/questions/75792633/how-to-bring-and-image-request-from-js-to-display-in-html

3条答案

按热度按时间

kiz8lqtg1#

选择页面上的<img>元素并设置其src属性。

const name = document.getElementById("name");
const pokemonImage = document.getElementById('pokemonImg')
const height = document.getElementById("height");
const weight = document.getElementById("weight");
const button = document.querySelector(".button");
button.addEventListener('click', (e) => {
  e.preventDefault()
  const randomNumber = Math.ceil(Math.random() * 905)
  fetch(`https://pokeapi.co/api/v2/pokemon/${randomNumber}/`)
    .then(response => response.json())
    .then(pokemon => {
      name.innerHTML = pokemon['name'];
      height.innerHTML = pokemon['height'];
      weight.innerHTML = pokemon['weight'];
      pokemonImage.src = `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemon['id']}.png`;
    })
})

<img id="pokemonImg">
<h3>Name:</h3>
<div id="name"></div>
<h3>Height:</h3>
<div id="height"></div>
<h3>Weight:</h3>
<div id="weight"></div>
<button class="button">Generate Pokemon Team!</button>

赞(0）回复(0）举报 2023-03-21

ldxq2e6h2#

您可以只获取带有id的标记并设置属性

const nameElem = document.getElementById("name");
const pokemonImage = document.getElementById('pokemon')
const heightElem = document.getElementById("height");
const weightElem = document.getElementById("weight");
const button = document.querySelector(".button");

button.addEventListener('click', (e) => {
  e.preventDefault()
  const randomNumber = Math.ceil(Math.random() * 905)
  fetch(`https://pokeapi.co/api/v2/pokemon/${randomNumber}/`)
    .then(response => response.json())
    .then(pokemon => {
      const {
        name,
        height,
        weight,
        sprites
      } = pokemon;
      console.log(name)
      nameElem.innerHTML = name;
      heightElem.innerHTML = height;
      weightElem.innerHTML = weight;
      pokemonImage.setAttribute('src', sprites.back_default);
    })
})

<img src="" id="pokemon">

<h3>Name:</h3>
<div id="name"></div>
<h3>Height:</h3>
<div id="height"></div>
<h3>Weight:</h3>
<div id="weight"></div>
<button class="button">Generate Pokemon Team!</button>

赞(0）回复(0）举报 2023-03-21

yruzcnhs3#

你只是犯了一些注意力不集中和打字错误。否则你的代码是正确的。
工作代码：

const name = document.getElementById("name");
const pokemonImage = document.getElementById('pokemon')
const height = document.getElementById("height");
const weight = document.getElementById("weight");
const button = document.querySelector(".button");
button.addEventListener('click', (e) => {
  e.preventDefault()
  const randomNumber = Math.ceil (Math.random() * 905)
  fetch (`https://pokeapi.co/api/v2/pokemon/${randomNumber}/`)
    .then (response => response.json())
    .then (pokemon => {
    console.log(pokemon)
    name.innerHTML = pokemon ['name'];
    height.innerHTML = pokemon ['height'];
    weight.innerHTML = pokemon ['weight'];
    

    pokemonImage.innerHTML =`<img id='monster' src=https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemon['id']}.png>`  
        })
    })

<html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Java Script 201</title>

  </head>

  <body>
    <div id="pokemon"></div>

    <h3>Name:</h3>
    <div id="name"></div>   
    <h3>Height:</h3>
    <div id="height"></div>
    <h3>Weight:</h3>
    <div id="weight"></div>    
    <button class="button">Generate Pokemon Team!</button>
  </body>

</html>

赞(0）回复(0）举报 2023-03-21

我来回答

javascript 如何将JS中的图像请求以HTML显示[已关闭]

3条答案

相关问题

热门标签

最新问答