Question

我正在这样加载网站中的各种图像：

  render () {
    const imageUrl = require(`assets/images/${this.props.image}`)
    return (
      <img 
        className={this.props.className} 
        src={imageUrl} 
        alt={this.props.description} 
        itemProp={this.props.itemprop} />
    )
  }

使用yarn start仅查看我的客户端代码时，此方法工作正常。但是，在服务器端渲染中，我的图像都具有src="[object Object]"。我进一步感到惊讶的是，一旦从服务器上下载了客户端代码，图像就不会被“水化”。

如何使用服务器端渲染动态地正确加载图像src属性？

Answer 1

我不确定为什么的影响是动态导入的图像的[Object object]的src，但是问题是我的Express中没有正确引用我的构建目录应用执行服务器渲染。

更改：

app.use(express.static('/../build')))

收件人：

app.use(express.static(path.resolve(__dirname, '../build')))

解决了这个问题。

反应-动态加载的图片未在服务器端渲染中显示

1 个答案: