我试图访问一个静态图像在React内的内联backgroundImage属性中使用。不幸的是，我已经不知道该怎么做了。
总的来说，我认为你是这样做的:
import Background from '../images/background_image.png';
var sectionStyle = {
width: "100%",
height: "400px",
backgroundImage: "url(" + { Background } + ")"
};
class Section extends Component {
render() {
return (
<section style={ sectionStyle }>
</section>
);
}
}
这适用于<img>标签。有人能解释一下两者的区别吗?
例子:
<img src={Background} />工作得很好。
谢谢你！
当前回答
如果你使用webpack，你需要编辑webpack.config.js和 把这个加进去
module: {
rules: [
{
test: /\.(png|jpe?g|gif)$/i,
dependency: { not: ['url'] },
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
},
},
],
},
],
}
如果你使用文件加载器来渲染图像，你需要像下面这样删除它:
{
test: /\.(png|jpe?g|gif)$/i,
loader: 'file-loader',
},
在CSS文件中，不要使用background-image，而是使用background:
background: url(Background);
有关webpack与图像的更多信息，请参见此: https://v4.webpack.js.org/loaders/url-loader/
其他回答
backgroundImage属性中的花括号是错误的。
可能你正在使用webpack和图像文件加载器，所以Background应该已经是一个字符串: backgroundImage: "url(" + Background + ")"
你也可以使用下面的ES6字符串模板来达到同样的效果:
backgroundImage: `url(${Background})`
只需添加所需的文件或url
<div style={
{
backgroundImage: `url(${require("./path_local")})`,
}
}
>
或者在css中设置base64 image
div {
background:
url('data:image/gif;base64,R0lGODlhZQBhAPcAACQgDxMFABsHABYJABsLA')
no-repeat
left center;
}
您可以使用https://www.base64-image.de/进行转换
如果你使用webpack，你需要编辑webpack.config.js和 把这个加进去
module: {
rules: [
{
test: /\.(png|jpe?g|gif)$/i,
dependency: { not: ['url'] },
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
},
},
],
},
],
}
如果你使用文件加载器来渲染图像，你需要像下面这样删除它:
{
test: /\.(png|jpe?g|gif)$/i,
loader: 'file-loader',
},
在CSS文件中，不要使用background-image，而是使用background:
background: url(Background);
有关webpack与图像的更多信息，请参见此: https://v4.webpack.js.org/loaders/url-loader/
有时候你的SVG会被React内联，所以你需要在它周围加引号:
backgroundImage: `url("${Background}")`
否则它是无效的CSS，浏览器开发工具将不会显示你已经设置了background-image。
还可以使用require()函数将图像引入组件。
<div style={{{\{\背景:' url(require， "images/img.svg") ' >
注意这两组花括号。第一组用于进入反应模式，第二组用于表示对象
