0

大家好，当我获取图像出现的 API 时，我被困在某一时刻，但我想预览图像并保存它。

这是我的 API 获取代码

enter code here

 const GIPHY_API = "https://api.giphy.com/v1/gi/search?api_key=AYZPE1y6oYslDUseLRHDBIsXKI2S3Kq2&limit=10&offset=0&q=";

 const [search, setSearch] = useState("");
 const [gifs, setGifs] = useState([]);

  const getImage = (gifs) =>{
    console.log("data",gifs);
  }

    let searchGif = () => {
    if(search.length > 0){
      setLoadingState(true);
      fetch(GIPHY_API+search)
      .then((res)=>{
        setLoadingState(false);
        return res.json();
      })
        .then((result)=>{
        console.log(result);
        setGifs(result.data.map((gif)=>{
          return gif.images.fixed_height.url;
        }))
      })
       .catch(()=>{
        alert("Something went wrong");
        setLoadingState(false);
      })
    }
  }

  return (
      <>
         <div className='header-data'>
           <img className='header_image' src={logo} alt='logo'/>
           <input type="text" placeholder='Write something here...'/>
           <img src={gifs} alt='logo'/>
        </div>
     </>
   )

图片点击代码如下

     <div className="list">
         {
             gifs.map((gif,index)=>{
               return (
                    <div className="item" key={index}>
                      <img src={gif} alt="giphy_image"
                           onClick={()=>{
                           getImage(gif)
                       }}
                        />  
                      </div>
                       )
                   })
                }
         </div>

我只希望从 API 获取图像（我已经完成）单击图像并在页面上预览就可以了。

提前致谢。

4

0 回答 0