javascript - Can I store images in const variables in React

Question

I am trying to shift all the images which I have on local-storage to cloudinary. I don't want to change the sass settings and just want to use the image. I am trying something like this.

const collaborate = () => {
  return(
    <Image 
      cloudName="my-id"
      publicId="publicc-id"
      dpr="auto"
      responsive
      width="auto"
      crop="scale"
      responsiveUseBreakpoints="true">
    </Image>
  )
}

And in the same file

const Highlights = () => {
  return (
    <section className="Highlights">
      {/* Collaborate */}
      <Highlight
        containerClass="highlight-collaborate"
        title="Collaborate"
        description={descriptions[1]}
        linkUrl="/about"
        linkText="See What We Do"
        image={collaborate}
        imageAlt="Collaborate"
        backgroundColor="#EEFFF0"
      />

    </section>
  );
};

The image is working when I try using // import collaborate from '../../../assets/file_name'; but when I am trying it this way then I am getting the imageAlt and not the image, any idea how can I resolve this ?

question from:https://stackoverflow.com/questions/65839731/can-i-store-images-in-const-variables-in-react

Answer 1

Waitting for answers