在 React 应用程序中存储图像的位置

在 React 应用程序中存储图像的位置

Where to store images in a React application

您应该将图像存储在靠近它们在 React 应用程序中使用的位置。例如，如果您有一个Contacts.js使用
contact.png图像的组件，请将图像存储在文件旁边Contacts.js。

另一方面，您没有在组件中导入的图像，例如
favicons应该存储在该public目录中。

假设我们有以下文件夹结构。

src/
  pages/
    contacts/
      Contacts.js
      index.js
      contacts.webp

请注意，该contacts.webp图像紧挨着Contacts.js
使用它的文件放置。

import ContactsIcon from './contacts.webp';

export function Contacts() {
  return (
    <div>
      <h2>Contacts</h2>
      <img src={ContactsIcon} alt="contacts" />
    </div>
  );
}

将图像放置在靠近使用它们的地方有多个优点：

• 如果我们img从组件中删除标签，我们知道我们可以安全地删除图像，因为它没有在我们应用程序的其他任何地方使用
• 简单的导入语句 – 所有相互交互的文件都彼此靠近，因此我们可以从同一目录导入
• 如果图像被错误地删除，我们会得到构建时错误，因为导入语句会失败，而不是在不知不觉中损坏图像（从public/目录中引用）。

如果contacts.webp图像也在另一个组件中使用，我会将图像移动到单独的目录中。

src/
  pages/
    contacts/
      Contacts.js
      index.js
    about/
      About.js
      index.js
  images/
    contacts.webp

现在我将从和images/contacts.webp中
导入图像。Contacts.jsAbout.js

import ContactsIcon from '../../images/contacts.webp';

export function Contacts() {
  return (
    <div>
      <h2>Contacts</h2>
      <img src={ContactsIcon} alt="contacts" />
    </div>
  );
}

如果我最终<img />从其中一个组件中删除引用图像的标签，那么我会将图像移到使用它的唯一组件旁边。

您的 IDE 应该能够向您显示contacts.webp项目中的所有引用。

您可以在您的文件夹中创建一个images/或favicons/目录，用于public/存储您的网站图标、站点徽标或您不打算导入任何组件的任何其他类型的图像。

public/
  favicons/
    favicon-16x16.png
    favicon-32x32.png
    android-chrome-192x192.png
    apple-touch-icon.png
  index.html

你应该避免public/在你的 React 组件中使用目录中的图像，因为它们是在没有导入的情况下使用的。

例如，如果您有一个位于 的图像public/images/thumbnail.webp，您可以将srcimg 的 设置为"/images/thumbnail.webp"。

export default function App() {
  return (
    <div>
      {/* 👇️ local image */}
      <img src="/images/thumbnail.webp" alt="horse" />
    </div>
  );
}

另一方面，如果您显式导入图像，如果导入语句失败，您将在构建时收到错误。

简而言之：

• 您在 React 组件中导入的任何图像都应存储在靠近使用它们的位置（最好在同一目录中）。
• 任何你没有在你的 React 组件中导入的图像（例如favicons）应该存储在你的public/目录中，例如在一个favicons/文件夹下。