Importing an image dynamically in React Component

Question

I'm trying to dynamically load an image in some React Component. I'm using require instead of simply passing the paths in order to improve performance.

I gathered I could use an inline require and it does work. However, when I try to pass as a prop instead, I get errors.

What am I doing wrong?

EDIT: Turns out both work, I was doing something else wrong which was throwing the error. (Bonus question still applies tho)

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

Bonus question: Can this be done with ES6 import vs CommonJs require?

Did you create your project with create-react-app?

bennygenel
– bennygenel

2018-05-19 16:12:09 +00:00
Commented May 19, 2018 at 16:12 — bennygenel
– bennygenel, Commented May 19, 2018 at 16:12
Nope. I'm actually using GatsbyJS.

skube
– skube

2018-05-19 16:16:35 +00:00
Commented May 19, 2018 at 16:16 — skube
– skube, Commented May 19, 2018 at 16:16

Tomasz Mularczyk · Accepted Answer · 2018-05-19 16:03:33Z

3

Not sure if it is going to work but you can try:

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

answered May 19, 2018 at 16:03

Tomasz Mularczyk

36.4k19 gold badges118 silver badges176 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

skube Over a year ago

This may work though it seems a little heavy handed.

Tomasz Mularczyk Over a year ago

that's because of dynamic imports use Promises.

Leonel Sanches da Silva · Accepted Answer · 2020-06-01 22:14:31Z

For React 16+, @Tomasz Mularczyk's answer needs a small tweak:

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

Full Source:

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

Collectives™ on Stack Overflow

Importing an image dynamically in React Component

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related