Question

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

我收集了我可以使用内联require，它确实有效。但是，当我尝试以prop传递时，我会收到错误。

我做错了什么？

编辑：原来这两项工作，我正在做一些 else 错误，这就是抛出错误。（奖金问题仍适用于此）

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} />
  }
}

Answer 2

对于React 16 +，@ Tomasz Mularczyk的答案需要进行一些细微调整：

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 will show an object with a `default` property as the image you imported
        this.setState({ src: image.default })
      })
  }

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

完整来源：

{{1}}

在React Component

2 个答案: