reactjs - 在 React 组件中动态导入图像

Question

我正在尝试在某些 React 组件中动态加载图像。我使用 require 而不是简单地传递路径来提高性能。

我认为我可以使用内联 require 并且它确实有效。但是，当我尝试作为 prop 传递时，我收到错误。

我做错了什么？

编辑:事实证明这两项工作都有效，我做错了一些其他错误，导致了错误。 (奖金问题仍然适用)

import React from 'react';

// This works
export SomeComponent = () => (
  <div>
    <img src={require(`../images/my-logo.svg`)} />
  </div>
)

// This works too!
export SomeComponent = ({image}) => (
  <div>
    <img src={require(`../images/${image}`)} />
  </div>
)

<SomeComponent image="my-logo.svg" />

额外问题:这可以通过 ES6 import 与 CommonJs require 来完成吗？

Answer 1

不确定它是否会起作用，但你可以尝试:

class Image extends React.Component {
  constructor(props) {
    super(props)
    this.state = { src: null }
  }

  componentDidMount() {
    this.loadImage(this.props.name)
  }

  componentDidUpdate(prevProps) {
    if(prevProps.name !== this.props.name) {
      this.loadImage(this.props.name)
    }
  }

  loadImage(name) {
    import(`../images/${name}`)
      .then(image => {
        console.log(image); // this may be object with image inside...
        this.setState({ src: image })
      })
  }

  render() {
    return <img src={this.state.src} />
  }
}