我试图访问一个静态图像在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} />工作得很好。
谢谢你！
当前回答
还可以使用require()函数将图像引入组件。
<div style={{{\{\背景:' url(require， "images/img.svg") ' >
注意这两组花括号。第一组用于进入反应模式，第二组用于表示对象
其他回答
更新至17.05.22 而不是:
backgroundImage: "url(" + { Background } + ")"
do:
backgroundImage: "url(" + Background + ")"
对于ReactJS中的本地文件。 试一试
import Image from "../../assets/image.jpg";
<div
style={{ backgroundImage: 'url(' + Image + ')', backgroundSize: 'auto' }}
>Hello
</div>
这就是带有内联样式的ReactJS的情况，其中Image是一个本地文件，必须用路径导入。
如果您正在使用ES5 -
backgroundImage: "url(" + Background + ")"
如果您正在使用ES6 -
backgroundImage: `url(${Background})`
基本上删除不必要的花括号，同时为backgroundImage属性工作增加值将工作。
试试这个:
style={{ backgroundImage: `url(require("path/image.ext"))` }}
有时候你的SVG会被React内联，所以你需要在它周围加引号:
backgroundImage: `url("${Background}")`
否则它是无效的CSS，浏览器开发工具将不会显示你已经设置了background-image。
