React JS：從 blob 渲染圖像

Question

我正在嘗試通過從useEffect掛鈎調用 API 在我的頁面上呈現圖像。 該服務返回一個 blob，該 blob 保存在 state 中。 最后，從圖像 src 屬性調用 state 變量。

到目前為止，我已經嘗試在圖像 src 的屬性中使用URL.createObjectURL()方法，但出現以下錯誤。

<img src={URL.createObjectURL(blob)} alt="test image" />

我還嘗試將 blob 的字符串轉換為 blob，然后將其傳遞給URL.createObjectURL()方法。 結果是一個 src 屬性為blob:https://i86fqf.csb.app/fcab2185-c1b2-4fe7-9c9b-8ca3c56a4467的圖像，但圖像未加載。

// Other imports ...
import response from "./response";

export default function App() {
  const [imageBlob, setImageBlob] = useState(response);
  const blob = new Blob([imageBlob.items[0].image.$content], {
    type: "image/jpeg"
  });
  const imageURL = URL.createObjectURL(blob);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <img src={imageURL} alt="img" />
    </div>
  );
}

知道我缺少什么嗎？ 您可以在此處找到代碼示例https://codesandbox.io/s/image-blob-not-loading-i86fqf

Answer 1

'$content' 是 base64 字符串，如果您想從中創建 blob，可以在此處研究帖子： 從 Z686155AF75A60A0F6E9D80C1F7EDD3E 中的 Base64 字符串創建 BLOB

或者您可以簡單地添加“data:image/png;base64”，使 base64 作為 src 工作。

  const base64 = `data:image/png;base64,${imageBlob.items[0].image.$content}`;
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <img src={base64} alt="img" />
    </div>
  );