作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
当使用 create-react-app 时,我的图片文件夹应该放在什么目录下?
在 src
或 public
中?
当我准备好运行 yarn build
时,一个或另一个会出现问题吗?
我听说只有放在 public
目录中的文件才会在构建后加载。 对还是错?
我猜 React 团队在 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
文件夹中的结构是这样的。您能告诉我这是否是好的/最佳做法吗?
**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>
)
最佳答案
您应该在 src 下为图像创建一个文件夹。然后只需使用import './myImage.png' as imageThatIsMine
将它们导入 .js 文件。
在 .css 中你会使用
.myClass {
background-image: url('./myImage.png')
}
这样做将确保 webpack 正确地将文件移动到构建文件夹并附加正确的路径。
参见 docs了解更多信息。
如果您将任何东西放在 src 文件夹之外并尝试导入,您将收到一条错误消息,告诉您使用 src。
您可以将项目放在 ;public' 文件夹中,但不推荐这样做。参见 docs
如果您确实使用公共(public)文件夹,则在使用它们时需要以 %PUBLIC_URL%
为前缀。
关于javascript - React CRA - 图像生态系统,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48603554/
我最近遇到了 HFOSS (人道主义免费开源软件)项目以及其他一些公司在做智能电网软件公司和其他类型的绿色软件项目。 由于我正在对该主题进行一些研究,并且因为谷歌在绿色/生态/人道主义/可持续性上的搜
我是一名优秀的程序员,十分优秀!