React CRA - 图像生态系统

Question

当使用 create-react-app 时，我的图片文件夹应该在什么目录？

在 src 或 public?

当我准备运行 yarn build 时，一个或另一个会出现问题吗？

我听说构建后只有放在 public 目录中的文件才会被加载。 判断对错?

我想 index.html 上 React 团队的评论让我感到困惑。

    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
        <!--
          Notice the use of %PUBLIC_URL% in the tags above.
          It will be replaced with the URL of the `public` folder 
          during the build.
          Only files inside the `public` folder can be referenced from 
          the HTML.
          Unlike "/favicon.ico" or "favicon.ico", 
          "%PUBLIC_URL%/favicon.ico" will
         work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->

编辑： 阅读下面的评论后，我的图像文件夹在 src 文件夹中的结构如下。你能告诉我这是否是一种 good/best 做法吗？

**Images Component**
import Foo from "./images/foo.jpg";
import Bar from "./images/bar.jpg";
import './styles/Images.css';

export const Logo = () => (
    <img src={Foo} alt="bla bla" />
)
export const Profile = () => (
    <img src={Bar} alt="bla bla" />
)

我要使用图片的一个组件。

import { Logo, Profile } from './Images';

const Home = () => (
   <div>
    <Logo/>
    <Profile/>
   </div>
)

Answer 1

您应该在 src 下为图像创建一个文件夹。然后只需使用 import './myImage.png' as imageThatIsMine 将它们导入 .js 文件。

在 .css 中你会使用

.myClass {
  background-image: url('./myImage.png')
}

这样做将确保 webpack 正确地将文件移动到构建文件夹并附加正确的路径。

有关详细信息，请参阅 docs。

如果您将任何内容放在 src 文件夹之外并尝试导入，您将收到一条错误消息，提示您使用 src。

您可以将项目放在 ;public' 文件夹中，但不推荐这样做。参见 docs

如果您确实使用 public 文件夹，则在使用它们时需要添加 %PUBLIC_URL% 前缀。

React CRA - 图像生态系统

React CRA - Images Ecosystem

javascript

npm

reactjs

create-react-app

yarnpkg