reactjs - 我在组件中有一个静态图像，取决于调用它的组件，图像可能会被破坏

Question

我有这个组件叫SearchBarScreen：

import React, { useEffect } from "react";
import "./index.scss";
export const SearchBarScreen = (props) => {
  return (
    <>
      <img src="./assets/img/logo.png" className="nav_logo" alt="logo mercadolibre" />
    </>
  );
};

我的项目有这样的结构：

根据我调用此组件的位置，图像可能会损坏。

例如，在上一张图片中，可以在src/components/items/components调用它的文件夹下看到它SearchBarScreen。例如，图像显示为已损坏，ItemDetailScreen但未显示在 上ItemScreen。

我总是在两个组件中以相同的方式调用它：

return (
  <>
    <SearchBarScreen props={props} />
  </>
);

在ItemDetailScreen

在ItemDetailScreen

标签： reactjs

Answer 1

如果您希望图像加载始终如一地工作，您需要将图像导入为一个组件，而不是您通常在标准 HTML 中使用的样式。

像这样：

import React, { useEffect } from "react";
import Logo from '../path/to/image';
import "./index.scss";

export const SearchBarScreen = (props) => {
  return (
    <>
      <img src={Logo} className="nav_logo" alt="logomercadolibre" />
    </>
  );
};

编辑：如果您绝对必须使用我不推荐的公用文件夹，请按照以下方式操作：https ://create-react-app.dev/docs/using-the-public-folder/

您基本上会使路径成为绝对路径而不是相对路径。

参考：

• https://create-react-app.dev/docs/adding-images-fonts-and-files/
• 无法使用 create-react-app 导入图像