Load images based on dynamic path in ReactJs

by

Assuming that you are using webpack, you need to import the image in order to display it like

<img src={require('images/06.jpg')} alt="product" />

Now that your image data is dynamic,
directly specifying the import path like

<img src={require(image)} alt="product" />

doesn’t work.

However you can import the image by making use of template literals like

<img src={require(`${image}`)} alt="product" />

So your code will look like

render() {
    const { name, price, currency, image, url, isInCart } = this.props;

    return (
        <div className="product thumbnail">
            <img src={require(`${image}`)} alt="product" />
            <div className="caption">
                <h3>
                    <a href={url}>{name}</a>
                </h3>
                <div className="product__price">{price} {currency}</div>
                <div className="product__button-wrap">
                    <button
                        className={isInCart ? 'btn btn-danger' : 'btn btn-primary'}
                        onClick={this.handleClick}>
                        {isInCart ? 'Remove' : 'Add to cart'}
                    </button>
                </div>
            </div>
        </div>
    );
}

P.S. Also make sure that your image path is relative to the file you are importing them in.

More Related Contents:

  1. When to use ES6 class based React components vs. functional ES6 React components?
  2. How to import a JSON file in ECMAScript 6?
  3. What is mapDispatchToProps?
  4. React Context vs React Redux, when should I use each one? [closed]
  5. What is the best way to access redux store outside a react component?
  6. Understanding React-Redux and mapStateToProps()
  7. Can’t send a post request when the ‘Content-Type’ is set to ‘application/json’
  8. Use Connect or pass data as props to children
  9. How do I access store state in React Redux?
  10. Getting an error “A non-serializable value was detected in the state” when using redux toolkit – but NOT with normal redux
  11. How to create dynamic routes with react-router-dom?
  12. Use history.push in action creator with react-router-v4?
  13. Changing the layout of a component depending on Redux state
  14. How does connect work without mapDispatchToProps
  15. Global state in React Native
  16. Redux Presentational Components Vs Container Component
  17. How can I dispatch function in redux?
  18. Component won’t update when a redux state change occurs
  19. Type ‘{}’ is not assignable to type ‘IntrinsicAttributes & IntrinsicClassAttributes
  20. how to set initial state in redux
  21. Could not find “store” in either the context or props of “Connect(App)”
  22. My Redux state has changed, why doesn’t React trigger a re-render?
  23. How do I see state when logging to the console instead of Proxy object inside reducer action?
  24. Working with CSS in React [closed]
  25. How to update nested state properties in React
  26. How to parse JSON in Scala using standard Scala classes?
  27. How to overcome the CORS issue in ReactJS
  28. React-Redux: Actions must be plain objects. Use custom middleware for async actions
  29. Serialize in JSON a base64 encoded data
  30. Parsing JSON feed automatically into MS Access

Leave a Comment