如何在反應中顯示實際圖像而不是來自 JSON 的圖像鏈接

Question

我試圖在頁面上顯示來自 JSON 的圖片，但我得到的不是圖片，而是鏈接。 如何解決？

我試過使用：

<div id="test">
      <img src={data[0].image}/>
    </div>

但它不起作用。 有一個叫做 State 的東西，但我真的不知道如何使用它。

我的代碼：

import React from 'react'

function Coffee() {
 
  const baseURL = 'https://api.sampleapis.com/coffee/hot';
  fetch(baseURL)
  .then(resp => resp.json())
  .then(data => displayData(data[0].image));

function displayData(data) {
  document.querySelector("#test").innerHTML = JSON.stringify(data, null, 2);
} 

  return (
      <div id="test">
        <img src="??"/>
      </div>
    
  )
}
export default Coffee

Answer 1

例如，在 React 的useState的幫助下，使用名為imageURL的 state，如下所示。 這就是我要說的正確的 React 方式。

您將看到一些額外的 HTML 和 JavaScript 代碼。 所以我們在 Stack Overflow 上有一個工作示例。 這里真正重要的是Coffee function。

 function Coffee() { const [imageURL, setImageURL] = React.useState(""); React.useEffect(() => { const baseURL = "https://api.sampleapis.com/coffee/hot"; fetch(baseURL).then((resp) => resp.json()).then((data) => setImageURL(data[0].image)); }, []); return ( <div id="test"> <img src={imageURL} alt="" /> </div> ); } ReactDOM.render( <Coffee />, document.getElementById("root") );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script> <div id="root"></div>