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

时间:2019-03-22 16:14:48

标签: css reactjs image path

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

如果您有任何想法,请分享!谢谢。

1 个答案:

答案 0 :(得分:0)

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

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

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