I have an img tag in javascript that is not showing the file (local file). The file is in a folder called images and the js file I'm trying to use the image is in a folder called Pages. both folders are in the same directory.

<img src='../images/img.png' alt='template'/>

This is the way im using the tag and the browser is showing the alt name with the icon on an invalid image

I have an img tag in javascript that is not showing the file (local file). The file is in a folder called images and the js file I'm trying to use the image is in a folder called Pages. both folders are in the same directory.

<img src='../images/img.png' alt='template'/>

This is the way im using the tag and the browser is showing the alt name with the icon on an invalid image

• javascript
• html
• css
• linux
• reactjs

• 1 Can you share your full file structure? Perhaps the relative path is incorrect. – dkershaw Commented Dec 17, 2019 at 18:28
• @dkershaw made an edit with it – Pedro Fontes Commented Dec 17, 2019 at 18:33

3 Answers 3

You can use relative path when the image is in the public folder of your app, whatever is better to pass image through webpack, so that way you just need to import the image as a normal object and use it into your ponent.

import template from '../images/image.jpg/

// later ir your code 

<img src={template} alt="image al" />

you need to import the image in react ponent like the following.

import image from '../images/img.png';

and use in the img tag like the following

<img src={image} />

and it will work.

If this is a React project you need to require the image in your src like this:

src={ require('../images/img.png') }