image tag react code example
Example 1: how to write img jsx
<img src={window.location.origin + '/img/myImage.png'} />
Example 2: import img react
import shoe1 from './img/shoe_01.jpg'
const Shoe = (e) => {
return (
<div className="shoe-container">
<img src={shoe1} alt=""/>
</div>
);
}
Example 3: import img react in another file
//import imgs in a different js file
import lostImage from './assets/img/illustrations/lost.svg';
export { lostImage };
//import in the component to use it
import {lostImage} from './images.js'
Example 4: Image react native
Adding Image
Let us create a new folder img inside the src folder. We will add our image (myImage.png) inside this folder.
We will show images on the home screen.
App.js
import React from 'react';
import ImagesExample from './ImagesExample.js'
const App = () => {
return (
<ImagesExample />
)
}
export default App
Local image can be accessed using the following syntax.
image_example.js
import React, { Component } from 'react'
import { Image } from 'react-native'
const ImagesExample = () => (
<Image source = {require('C:/Users/Tutorialspoint/Desktop/NativeReactSample/logo.png')} />
)
export default ImagesExample