React - 动态加载的图像未显示在服务器端渲染中答案

【问题标题】：React - dynamically loaded images not showing up in server side renderingReact - 动态加载的图像未显示在服务器端渲染中
【发布时间】：2019-10-04 00:23:51
【问题描述】：

我正在我的网站中加载各种图像，如下所示：

  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 属性？

【问题讨论】：

const imageUrl = React.lazy(()=>import(assets/images/${this.props.image})) 怎么样，然后用Suspense 包裹img
@Amir-Mousavi 它可能会使图像出现，但在服务器端渲染中我不想延迟加载任何东西——我希望所有东西都通过服务器静态渲染。

标签： reactjs express create-react-app server-side-rendering

【解决方案1】：

我不完全知道为什么这对我的动态导入图像的影响是 [Object object] 的 src，但问题是我的构建目录在我的 Express 应用程序中没有正确引用服务器渲染。

变化：

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

到：

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

解决了这个问题。

【讨论】：