Question

我要制作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>
   )
 }

如果您有任何想法，请分享！谢谢。

Answer 1

显然，这是一个时间的故事：jsx没有时间从函数中获取图像。为了解决我的问题，我只返回了所有的CSS对象：

test() {
  let test = 'test'
  return { backgroundImage: 'url(' + require( '../' + test + '.png' ) + ')' }
}

render() {
  return (
    <div
      style={ this.test() }
    >
    </div>
   )
 }

从反应代码获取父文件夹中的图像

1 个答案: