Question

使用create-react-app时，我的images文件夹应该在哪个目录中？

在src或public？

当我准备好yarn build时，是否会出现一个或另一个问题？

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

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

    <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文件夹中my images文件夹的结构。如果这是一个好的/最佳实践，你能告诉我吗？

**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＆＃39;文件夹，但不建议。见docs

如果使用公用文件夹，则在使用时需要使用%PUBLIC_URL%作为前缀。

反应CRA - 图像生态系统

1 个答案: