Home » React JS

How to add an image in React JS Application?

React JS | Adding an Image: In this tutorial, we are going to learn how to add an image in React JS application?
Submitted by Godwill Tetah, on November 16, 2019

Hello! In this article, we will learn how to add images in React JS? I remember when I just started coding in React JS, I thought adding images would be done exactly as it is in HTML. I later realized that it was different.

Let's quickly look at its syntax or how it is done?

Just like in HTML, having the image in the same folder with the image makes it easy getting the file location URL.

We equally ought to know the extension with our image.

Open your index.js file and type the following as usual,

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(<App />, document.getElementById('root'))

From React JS basics, the code above simply imports the required dependencies, components and renders everything to the root node.

import React from "react"
import Img from './congrats.png'

class App extends React.Component {
	render() {
		return (
			<div> 
				<center>
					<img src= {Img} alt="pic" />
					<br/> <b> CONGRATS </b>
				</center>
			</div>
		)
	}
}
export default App

From the code above, we added the image congrats.png using the syntax <img src = {Img} alt="pic" />.

We first of all import the image as seen in the second line above.

The term Img is not conventional and any name can be used, provided it is equally used the same when writing the image tag.

Congrats.png is the name of my image and its an extension is PNG.

When writing the tag, we enclose {Img} in curly braces and the tag ends with / > which is a convention in JSX.

Also note that, all react JS image tags must have an alternate (alt).

Output

Thanks for coding with me! See you @ the next article. Feel free to drop a comment or question.