Question

我有以下组件，使用html渲染图像img src =＆＃34; ..＆＃34;

export default class Landing extends Component{

  render() {
   return(
     <div className="topimg">
       <img src={'test.jpg'}/>
    </div>

但是页面不显示图像。文件夹结构如下

/layout/Landing.jsx /layour/test.jpg

适用于网址，但不适用于本地文件。

Answer 1

不确定如何构建应用，但您可以先通过require将图像附加到组件中。这样，应用程序就知道在渲染之前包含图像（相对于组件引用）。

export default class Landing extends Component {
  constructor( props ) {
    super(props);

    this.images = {
      test: require('./test.jpg')
    };
  }

  render() {
    return (
      <div className="topimg">
        <img src={this.images.test}/>
      </div>
    );
  }
}

（reactjs）在反应组件

1 个答案: