时间戳

首页 > 解决方案 > 在 JSON 中获得图像链接后，如何使图像出现在网络浏览器上

javascript - 在 JSON 中获得图像链接后，如何使图像出现在网络浏览器上

问题描述

我正在学习编码三个月，最近我学习了一些基本的后端（数据库和服务器）并做出反应。现在我正在尝试创建一个网络应用程序，它使用 pixabay API 在网络浏览器上显示一张随机图片，我认为该应用程序的另一个功能是我可以根据主题过滤显示的图片。（由于每张图片都有标签键，比如“标签”：“风景、夏天、海滩”，我将创建一个输入字段，允许用户输入他们想要获取的图片类型）

现在我成功地获得了图片的 JSON 数据并将它们记录在控制台上，但我对接下来要做什么感到有点困惑。我猜我需要创建两个函数才能选择一张图片并过滤响应（？）。你怎么看？

所以，想请大家给点建议。这些是我目前拥有的一些文件。

import React from "react";
import Header from "./components/Header";
import Image from "./components/Image";
import Button from "./components/Button";

function App() {
  function getPictures() {
    const url =
      "https://pixabay.com/api/?key=[I put my key here & deleted for now]";
    fetch(url)
      .then((data) => {
        return data.json();
      })
      .then((json) => {
        return console.log(json);
      });
  }
  return (
    <div className="App">
      <Header />
      <Image />
      <Button getPictures={getPictures} />
    </div>
  );
}

export default App;

另一个文件

import React, { useState } from "react";

const Button = (props) => {
  const [hasStarted, setHasStarted] = useState(false);
  function start() {
    setHasStarted(true);
  }

  return (
    <div className="button-area">
      <div className="slideShowBtn btn">
        {hasStarted && <button>Go back</button>}
        {hasStarted && <button>Next picture</button>}
      </div>

      <div className="startBtn btn">
        {!hasStarted && (
          <button
            onClick={() => {
              startCCC();
              props.getPictures();
            }}
          >
            Start
          </button>
        )}
      </div>
    </div>
  );
};

export default Button;

标签： javascripthtmlreactjsrestfetch

解决方案

您可能还应该在组件中包含您拥有的Image内容，但看起来您正在尝试做的是让Image组件显示图像，并且当您按下按钮时图像会发生变化。因此，您需要将图像 url 存储为某种状态，然后将其传递给显示组件。

就像是：

import React, { useState, useCallback } from 'react';
function App() {
  const [ imageUrl, setImageUrl ] = useState( null );
  const getPicture = useCallback( () => {
    const url = 'https://pixabay.com/api/?key=...';
    fetch( url ).then( data => {
      // I don't know what the API response looks like, this is just an example...
      const url = data.json().image.url;
      if ( url ) setImageUrl( url );
    } );
  }, [ setImageUrl ] );

  return (
    <div className="App">
      <Header />
      <Image url={imageUrl} />
      <Button getPictures={getPictures} />
    </div>
  );
}

推荐阅读