Question

我正在编写一个React组件，此组件需要显示img，但该url来自一个属性：

import React from 'react'

export default class ShowImage extends React.Component {

  render () {
    return (
      <div>
        The url is {this.props.imgUrl}.
        <img src={this.props.imgUrl} />
      </div>
    )
  }
}

this.props.imgUrl包含正确的值，因为如果我使用img删除该行，那么我的应用程序会正确显示该值。

这是我的主要申请：

export default class MyApp extends React.Component {
  render () {
    return (
      <ShowImage imgUrl='apple.gif' />
    )
  }
}

图片未显示在网络浏览器中，因为其网址未被yarn build翻译。

我尝试使用src={require(this.props.imgUrl)}，但在这种情况下，我的React应用无效。

apple.gif与*.js文件位于同一文件夹中。

有什么办法以某种方式从字符串SRC参数显示图像？

Answer 1

除非您明确提供静态文件，否则不会加载图像。如果您使用的是webpack，则可以将以下代码添加到webpack中，以使其提供静态文件。

在webpack加载器中，添加

CASCADE

这将使webpack加载图像，图像URL将为'./apple.gif'。 apple.gif应该位于目录的根目录。

来自React中字符串属性的图像URL

1 个答案: