javascript - 如何在 json.message 对象中显示多个图像？-6ren

javascript - 如何在 json.message 对象中显示多个图像？

转载作者：行者123 更新时间：2023-12-01 04:34:57

我正在构建一个随机 DogAPI 图像生成器，您可以将 1-50 之间的数字放入表单文本框中，点击发送，它会显示该数量的随机狗照片。

我快到了。如果您在文本字段中输入“1”，它将返回 1 个随机图像!但问题是当你放置 2 个或更多时。它可以很好地打印到控制台，以这些图像链接的形式显示您选择的数字，但在主页上，它显示了损坏的图像链接。它们都在一个数组内部，一个对象内部......我只是对如何显示对象中的所有图像而不仅仅是 1 个图像感到困惑。

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>How Many?</title>
    <link rel="shortcut icon" href="#">
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="container">
        <h1>How Many Dog Pics Do You Want?</h1>
        <p>Pick a number between 1-50</p>
        <form>
          <input class="number" value="3" type="text" placeholder="1-50?" required>
          <input type ="submit" value="Show me the doggies!">
        </form>
        <section class="results hidden">
          <h2>Here you go!</h2>
          <img class="results-img" alt="placeholder">
        </section>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
    <script src="index.js"></script>
</body>
</html>

CSS:

* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
}

.container {
  max-width: 600px;
  margin: 0 auto;
}

.hidden {
  display: none;
}

JS:

'use strict';

function getDogImage(text) {
  fetch(`https://dog.ceo/api/breeds/image/random/${text}`)
    .then(response => response.json())
    .then(responseJson => displayResults(responseJson));
}

function watchForm() {
  $('form').submit(event => {
    event.preventDefault();
    var text = $('.number').val();
    if(text < 50){
      getDogImage(text);
    }else{
      alert('Number must be between 1-50')
    };
  });
}

function displayResults(responseJson) {
  console.log(responseJson);
  //replace the existing image with the new one
  $('.results-img').replaceWith(
    `<img src="${responseJson.message}" class="results-img">`
  )
  //display the results section
  $('.results').removeClass('hidden');
}

$(function() {
  console.log('App loaded! Waiting for submit!');
  watchForm();
});

最佳答案

以下是您需要执行的操作的示例。你也许可以用 ES6 的方式做到这一点，但下面是我的工作示例。这将打印出对象中的数组并允许您进行迭代，以便打印图像网址。您可以在我的 Codepen 上查看工作示例 -

https://codepen.io/CodeHero1/pen/JjoEYMv

var messageObject = { message: [ 
'https://images.dog.ceo/breeds/rottweiler/n02106550_12828.jpg', 
'https://images.dog.ceo/breeds/sheepdog-english/n02105641_6875.jpg', 
'https://images.dog.ceo/breeds/terrier-lakeland/n02095570_4656.jpg' ], status: 
'success' };


for(var i=0; i < messageObject.message.length; i++){

    console.log(messageObject.message[i]);
}

我在 CodePen 示例中更进一步，并提供了一个使用 Jquery 附加返回图像的实时工作示例。我还将在这里发布这段代码中最重要的部分。我对你的函数进行了一些重构，以便为你提供一个更好的例子。请参阅下文。

function displayResults(responseJson) {
  console.log(responseJson);

  for(var i=0; i < responseJson.message.length; i++){

        console.log(responseJson.message[i]);
    $('.results').append(

      `<img src="${responseJson.message[i]}" class="results-img">`
    );
  }
    //display the results section
    $('.results').removeClass('hidden');
}

关于javascript - 如何在 json.message 对象中显示多个图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59382654/

文章推荐： java - 将外部 jar 添加到 Web 项目类路径

文章推荐： python - 如何使用访问 token 获取 youtube api 客户端句柄

文章推荐： awk - 在管道符号之前按 awk 中的字段计数

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何在 json.message 对象中显示多个图像？