无法从 React 中的本地文件加载图像，React 正在尝试从代理中提取图像？

Question

我目前正在构建一个小型反应网页，我正在构建的组件根据某个变量是否为空返回两个图像之一（它应该在发出 api 请求后保存指向图像的链接，但是开始为空）。当该链接不可用时，代码应该返回一个不同的 img 对象，其中包含本地可用的图像“camera.jpg”。

不幸的是，尽管我使用本地路径定义了图像，但 React 似乎正在尝试调用图像后端的代理。关于如何修复它有什么建议吗？

这是我的文件供参考

这是警告，告诉我 React 正在寻找图像的代理

在代码中查看 html 对象

<img
        id="imgHolder"
        src="./camera.jpg"
        alt="Something went wrong!"
        height="500"
        width="500"
      />

我尝试查看不同的来源，但我无法判断这是否是我的 js 代码的问题，或者我是否缺乏对 package.json 中代理值如何运行的理解。我想看到弹出的图像，但我得到的是替代文本。

Answer 1

您可能会收到该错误，因为您传递了字符串

./camera.jpg

，因为 React 使用 webpack 进行捆绑，而 webpack 以不同的方式处理图像等资源。

使用

require()

或

import

:

import cameraImage from './camera.jpg';

<img
  id="imgHolder"
  src={cameraImage}
  alt="Something went wrong!"
  height="500"
  width="500"
/>

希望这有帮助。如果没有，

您可以将

image

放在

Public

文件夹中，因为 public 文件夹中的文件作为静态文件，因此您可以像在代码中一样直接引用它们。

<img
  id="imgHolder"
  src="/camera.jpg"
  alt="Something went wrong!"
  height="500"
  width="500"
/>