[英]How to background-image css in React.Js?
This is my tree folder这是我的树文件夹
├── public
│ ├── favicon.ico
│ ├── image.jpeg
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
├── README.md
└── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
├── reportWebVitals.js
└── setupTests.js
This is my App.css这是我的App.css
.App {
text-align: center;
background: url("/image.jpeg");
}
This is my App.js这是我的App.js
import "./App.css";
function App() {
return (
<div className="App">
<h1>asdasdasd</h1>
</div>
);
}
export default App;
I'm triying to add background-image to App.js but react throws this message我正在尝试将背景图像添加到 App.js 但反应会抛出此消息
Failed to compile.
./src/App.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/App.css)
Error: Can't resolve '/image.jpeg' in '/home/ivan/Documents/code/REactJs/portafolio/src'
I'm dev on ubuntu 20, node version is v12.19.0我是 ubuntu 20 的开发者,节点版本是 v12.19.0
BTW I created this app yesterday and I dosen't work, but I have an old app I created a month ago and It works fine.顺便说一句,我昨天创建了这个应用程序,但我不工作,但我有一个我一个月前创建的旧应用程序,它运行良好。
I don't think your App.css
file can read images from your public
folder, due to React's import restrictions from outside the src
folder ( The create-react-app imports restriction outside of src directory ).我不认为你的App.css
文件可以从你的public
文件夹中读取图像,因为 React 的导入限制来自src
文件夹之外( src 目录之外的 create-react-app 导入限制)。 Instead, add an inline style to App
相反,向App
添加内联样式
import "./App.css";
function App() {
return (
<div className="App" style={{ backgroundImage: "url('/image.jpeg')" }}>
<h1>asdasdasd</h1>
</div>
);
}
export default App;
You are looking for image.jpeg in the wrong directory.您正在错误的目录中查找 image.jpeg。 Your image.jpeg is found in /public, so try looking for it in background: url("../public/image.jpeg");
您的 image.jpeg 位于 /public 中,因此请尝试在background: url("../public/image.jpeg");
查找它background: url("../public/image.jpeg");
instead of background: url("/image.jpeg");
而不是background: url("/image.jpeg");
I have faced issues with background image urls.我遇到了背景图片网址的问题。
On the internet, I found 2 answers:在网上,我找到了2个答案:
public
directory, use absolute path.如果图像保存在public
目录中,请使用绝对路径。src
directory, use relative path.如果图像保存在src
目录中,请使用相对路径。I have observed that these answers did not work if the css file or style is in one or more level deeper from the src directory.我观察到,如果 css 文件或样式位于 src 目录的一个或多个更深的级别,则这些答案不起作用。
├── public
│ ├── favicon.ico
│ ├── image.jpeg
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
├── README.md
└── src
├── App.css
├── App.js
├── a
│ └── b
│ ├── c.js
│ └── c.css
├── App.test.js
├── index.css
├── index.js
├── images
│ └── sample.png
├── logo.svg
├── reportWebVitals.js
└── setupTests.js
The following would work, as .logo
is kept in src/index.css
:以下将起作用,因为.logo
保存在src/index.css
:
.logo {
background-image: url(images/sample.png)
}
But, the following will not, as the same is kept in a/b/c.css
:但是,以下不会,因为a/b/c.css
保留了相同a/b/c.css
:
.logo {
background-image: url(images/sample.png)
}
Finally, I learnt that, using absolute path works in all the scenarios.最后,我了解到,使用绝对路径适用于所有场景。 That is, the following works in all levels.也就是说,以下适用于所有级别。
.logo {
background-image: url(/images/sample.png)
}
The above also means that, using absolute path when the files are kept in public
is not valid.以上也意味着,当文件public
时使用绝对路径是无效的。
The whole thing is here .整件事都在这里。
Further reference:进一步参考:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.