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

【问题标题】：Get an image in parent folder from react code从反应代码中获取父文件夹中的图像
【发布时间】：2019-03-22 16:14:48
【问题描述】：

我想制作一个 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>
   )
 }

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

【问题讨论】：

Webpack 不知道this.test() 的值是什么，所以它在构建时不需要它。你想达到什么目的？您想动态地从变量中获取图像吗？
是的，没错，我想动态显示带有背景图片的div
如果你从this.test() 返回'test'，Webpack 可能能够处理`../${this.test()}.png`。
谢谢，但你认为原生反应有可能吗？奇怪的是，我已经做了这个操作，它奏效了。
我明白你想说什么，但我找到了另一种不用 webpack 的方法

标签： css reactjs image path

【解决方案1】：

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

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

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

【讨论】：