CODEWITHSUNDEEP
reactjs
Acy
Acy

Reputation: 659

Short syntax for using local image in React without webpack?

I am able to display a local image with html img like this: 

import youtube from "./youtube.png"

and 

<img src={youtube}/>

However, I have got like hundreds of images I want to use import, so I don't want hundreds of import statements. Is there a shorter syntax for img src to refer to local images in React? And if webpack is the only way out, will webpack take much time to set up? And since I am on this topic, how does a website typically display images? Do devs download the images and upload these files when the website is deployed or do they straight up use src="https://....."?

Sorry if that is too many questions, I am really only concerned about the syntax to refer to local images, thank you.

Upvotes: 1

Views: 1350

Answers (1)

Tenza
Tenza

Reputation: 606

You could put them all in the public folder and access them that way if you don't want to use web pack.

As far as I know, there is not shorter way than the method you mentioned to import images, of course you can use web pack as well and once that's set up you can reference it.

As a side note this is from the React docs on usage of the public folder:

  • You have thousands of images and need to dynamically reference their paths.

You can read more about it here: https://facebook.github.io/create-react-app/docs/using-the-public-folder

Upvotes: 1

Related Questions