我要制作div的背景图片。 我在文件的父文件夹中使用图像,但是当我想通过函数访问它时,它不起作用:
test() {
return '../test.png'
}
render() {
return (
<div
style={{ backgroundImage: 'url(' + require( this.test() ) + ')' }}
>
</div>
)
}
请注意,当我在css文件中定义背景图片时(该位置位于同一位置)或执行此操作时,它会起作用:
render() {
return (
<div
style={{ backgroundImage: 'url(' + require( '../test.png' ) + ')'}}
>
</div>
)
}
当我将图像与代码放置在同一文件夹中并且执行此操作时,它也起作用:
test() {
return './test.png'
}
render() {
return (
<div
style={{ backgroundImage: 'url(' + require( this.test() ) + ')' }}
>
</div>
)
}
如果您有任何想法,请分享!谢谢。
答案 0 :(得分:0)
显然,这是一个时间的故事:jsx没有时间从函数中获取图像。 为了解决我的问题,我只返回了所有的CSS对象:
test() {
let test = 'test'
return { backgroundImage: 'url(' + require( '../' + test + '.png' ) + ')' }
}
render() {
return (
<div
style={ this.test() }
>
</div>
)
}