How to use an imported image in React?

I have been programming in React for a short time and I have some doubts about how to proceed.
I have a component that is displaying an imported svg as an image.

import Arrow from '../arrow.svg';


    if (!isChecked) {

      config.email = {
        clickable: true,
        image: Arrow,
        onClick: () =>
          inProfile
            ? dispatch(notification(CHANGE_STATUS))
            : browserHistory.push(/checkOut),
      };
    }


Now I want to replace the image I have in my project with one imported from an external library that is rendered as follows


<Img type="right-arrow" />

Here is an example that is working in my code right now



  renderImage() {
    return <Img type="right-arrow" />;
  }

  render() {

    return(
      {this.renderHeader}
      {this.renderTitle}
      {this.renderBody}
      {this.renderImage}
    );

  }

How can I use this new imported component instead of the previously used image?

I have tried several ways but I can’t get it to render.

the last thing I have tried is the following

import Image from '@market/image-market';


    if (!isChecked) {

      config.email = {
        clickable: true,
        image: <Img type="right-arrow" />
        onClick: () =>
          inProfile
            ? dispatch(notification(CHANGE_STATUS))
            : browserHistory.push(/checkOut),
      };
    }



I don’t see how I can use it within this structure. If someone could see my mistake. Thank you very much for your time and help in advance

97 thoughts on “How to use an imported image in React?”

Leave a Comment