The images are stored in the client/public/images folder. And the file name and extension is fetched from a mysql database. How do I write the src attribute of the img element to display the images.
<img src={`%PUBLIC_URL%/images/${portraitFile}`} alt='' />
this is not working
My project structure:
- public
-images
- portrait.jpg
- src
- components
- image viewer component
- App.js
You are using wrong syntax as per CRA app. Use the following:
<img src={require("../images/${portraitFile}").default} alt="" />
Give the path to your images folder.
If the images are in public folder. you can write:
<img src={`../images/${portraitFile}`} alt='Portrait' />
Notice the backticks since you are using template literal syntax.
<img src={require('../../public/images/${portraitFile}').default} alt='Portrait' /> I've done this since its in the public/images folder, but the console gives this error Cannot find module './'
../images/${portraitFile}} alt='Portrait' /> I have updated my answer. Hope it helps.If your project structure is like this:
- public
- images
- portrait.png
- src
...
- components
...
App.js
and you put your image tag inside App.js, you can source the image like this:
<img src={`../images/portrait.png}`} alt='' />
If you put your image inside your src directory:
- src
- assets
- images
- portrait.png
- components
...
App.js
at the app you can import like this:
import Logo from "./assets/images/logo192.png";
and render using the imported Logo:
<img src={Logo} alt="" />
I've got it guys. It was supposed to be:
<img src={`/images/${portraitFile}`} alt='Portrait' width='70%'/>
since every component is rendered in the index.html file, I should've had made the src structure according to the index.html file. That was it