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

Posted 2023-03-05

技术标签:

【中文标题】如何在 json.message 对象中显示多个图像？【英文标题】：How to show more than one image in json.message object? 【发布时间】：2020-04-10 10:52:23 【问题描述】：

我正在构建一个随机 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" >
        </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();
);

【问题讨论】：

您可以发布您要返回的对象吗？如果 number > 1，您将不得不循环遍历整个对象以提取图像 @JoeZ

 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'

【参考方案1】：

这是您将要做的事情的示例。您可能可以以 ES6 方式执行此操作，但下面是我的工作示例。这将打印出对象中的数组并允许您进行迭代，以便您可以打印出图像 url。您可以在我的 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');

【讨论】：

完美！就是这样！

以上是关于如何在 json.message 对象中显示多个图像？的主要内容，如果未能解决你的问题，请参考以下文章

如何快速制作多个图片文件夹的预览图

UML时序图

如何在 HTML 网页中显示多个 Plotly 图？（使用 plot_div）

R语言使用fmsb包可视化雷达图（radar chart蜘蛛图spider plot）独立显示多个数据对象的雷达图添加平均水平灰色区域每个雷达图都和平均水平进行对比

我无法正确生成能够兑换 JSON 日期的 kotlin 对象

R语言编写自定义函数设置fmsb包生成的漂亮的雷达图（radar chart蜘蛛图spider plot）独立显示多个数据对象的雷达图自定义每个雷达图的颜色标签等