javascript - React 图片：createObjectURL 链接返回错误 404（未找到）

我在使用 React 和 TypeScript 的以下代码创建了一个 ImageUrl。它生成了一个 URL，但不显示图片。点击该 URL，例如 "http://localhost:3003/0b4de100-d8eb-49a7-b43a-e2147310abbe" 会出现以下错误。我该如何修复这个问题？

错误：

http://localhost:3003/0b4de100-d8eb-49a7-b43a-e2147310abbe 加载资源失败：服务器响应状态为 404（未找到）

代码：

 const [photoURL, setPhotoUrl] = useState<string>('');

 const pictureData = await getPatientAvatar(patientId);
 const blob = new Blob([pictureData], { type: 'image/jpeg' });
 const imageUrl = URL.createObjectURL(blob);
 setPhotoUrl(imageUrl);

 <img src={photoUrl} />

网络标签中的图片：

答案＃1

通过调用 URL.createObjectURL() 创建的 URL 是一个 blob URL，其协议始终是 blob:。

你在问题中展示的 URL 并不是使用该方法创建的 blob URL，因为它的协议是 http:。

我在下面的代码片段中包含了一个可运行的示例。它将从图像 blob 数据创建一个对象 URL，然后将该 URL 作为字符串呈现，同时也用它作为渲染实际图像的源。你可以使用这段代码作为模型来重现成功。

<style>.avatar { height: 150px; width: 150px; }</style>
<div id="root"></div><script src="https://cdn.jsdelivr.net/npm/[email /umd/react.development.js"></script><script src="https://cdn.jsdelivr.net/npm/[email /umd/react-dom.development.js"></script><script src="https://cdn.jsdelivr.net/npm/@babel/[email /babel.min.js"></script><script>Babel.registerPreset('tsx', {presets: [[Babel.availablePresets['typescript'], {allExtensions: true, isTSX: true}]]});</script>
<script type="text/babel" data-type="module" data-presets="tsx,react">

// This Stack Overflow snippet uses UMD modules
const {StrictMode, useEffect, useState} = React;

// Since the Stack Overflow code snippet doesn't have access to your server,
// here is a function for fetching your example image data as a blob
async function fetchImageBlob (): Promise<Blob> {
  const response = await fetch('https://i.imgur.com/uSvshvJ.jpg');
  if (!response.ok) throw new Error('Response not OK');
  return response.blob();
}

function App (): React.ReactElement {
  const [objUrl, setObjUrl] = useState<string | undefined>();
  
  useEffect(() => void (async () => {
    if (objUrl) return;
    const blob = await fetchImageBlob();
    const oUrl = URL.createObjectURL(blob);
    setObjUrl(oUrl);
  })(), [objUrl]);

  return objUrl
    ? (
      <div>
        <pre><code>{objUrl}</code></pre>
        <img className="avatar" src={objUrl}></img>
      </div>
    )
    : (<div>Loading image...</div>);
}

const reactRoot = ReactDOM.createRoot(document.getElementById('root')!);

reactRoot.render(
  <StrictMode>
    <App />
  </StrictMode>
);

</script>

在 TypeScript 游乐场编写代码