'How to import image (.svg, .png ) in a React Component
I am trying to import an image file in one of my react component. I have the project setup with web pack
Here's my code for the component
import Diamond from '../../assets/linux_logo.jpg';
export class ItemCols extends Component {
render(){
return (
<div>
<section className="one-fourth" id="html">
<img src={Diamond} />
</section>
</div>
)
}
}
Here's my project structure.
I have setup my webpack.config.js file in the following way
{
test: /\.(jpg|png|svg)$/,
loader: 'url-loader',
options: {
limit: 25000,
},
},
{
test: /\.(jpg|png|svg)$/,
loader: 'file-loader',
options: {
name: '[path][name].[hash].[ext]',
},
},
PS. I can get image from any other remote source but not locally saved images. The JavaScript Console also doesn't give me any error. Please anything helps. I am quite new to react and unable to find what am I doing wrong.
Solution 1:[1]
try using
import mainLogo from'./logoWhite.png';
//then in the render function of Jsx insert the mainLogo variable
class NavBar extends Component {
render() {
return (
<nav className="nav" style={nbStyle}>
<div className="container">
//right below here
<img src={mainLogo} style={nbStyle.logo} alt="fireSpot"/>
</div>
</nav>
);
}
}
Solution 2:[2]
You can use require as well to render images like
//then in the render function of Jsx insert the mainLogo variable
class NavBar extends Component {
render() {
return (
<nav className="nav" style={nbStyle}>
<div className="container">
//right below here
<img src={require('./logoWhite.png')} style={nbStyle.logo} alt="fireSpot"/>
</div>
</nav>
);
}
}
Solution 3:[3]
If the images are inside the src/assets folder you can use require
with the correct path in the require statement,
var Diamond = require('../../assets/linux_logo.jpg');
export class ItemCols extends Component {
render(){
return (
<div>
<section className="one-fourth" id="html">
<img src={Diamond} />
</section>
</div>
)
}
}
Solution 4:[4]
There are few steps if we dont use "create-react-app",([email protected]) first we should install file-loader as devDedepencie,next step is to add rule in webpack.config
{
test: /\.(png|jpe?g|gif)$/i,
loader: 'file-loader',
}
, then in our src directory we should make file called declarationFiles.d.ts(for example) and register modules inside
declare module '*.jpg';
declare module '*.png';
,then restart dev-server. After these steps we can import and use images like in code bellow
import React from 'react';
import image from './img1.png';
import './helloWorld.scss';
const HelloWorld = () => (
<>
<h1 className="main">React TypeScript Starter</h1>
<img src={image} alt="some example image" />
</>
);
export default HelloWorld;
Works in typescript and also in javacript,just change extension from .ts to .js
Cheers.
Solution 5:[5]
I also had a similar requirement where I need to import .png images. I have stored these images in public folder. So the following approach worked for me.
<img src={process.env.PUBLIC_URL + './Images/image1.png'} alt="Image1"></img>
In addition to the above I have tried using require as well and it also worked for me. I have included the images inside the Images folder in src directory.
<img src={require('./Images/image1.png')} alt="Image1"/>
Solution 6:[6]
You can also try:
...
var imageName = require('relative_path_of_image_from_component_file');
...
...
class XYZ extends Component {
render(){
return(
...
<img src={imageName.default} alt="something"/>
...
)
}
}
...
Note: Make sure Image is not outside the project root folder.
Solution 7:[7]
To dynamically import an image using a variable, you can use the following:
const imageName = "myImage.png"
const images = require.context('../images',true);
const [imgUrl, setImgUrl] = useState('');
useEffect(() => {
if (images && imageName) {
setImgUrl(
images(`./${imageName}`).default
);
}
}, [imageName,images]);
...
<img src={imgUrl} />
Solution 8:[8]
import React, {Component} from 'react';
import imagename from './imagename.png'; //image is in the current folder where the App.js exits
class App extends React. Component{
constructor(props){
super(props)
this.state={
imagesrc=imagename // as it is imported
}
}
render(){
return (
<ImageClass
src={this.state.imagesrc}
/>
);
}
}
class ImageClass extends React.Component{
render(){
return (
<img src={this.props.src} height='200px' width='100px' />
);
}
}
export default App;
Solution 9:[9]
I used user5660307 answer. And also for server-side rendering using react and nodejs, you can add this in express server:
app.use(express.static("public"));
and in webpack.client.js:
module.exports = {
entry: "./src/client/client.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "public"),
},
module: {
rules: [
...
{
loader: require.resolve("file-loader"),
exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
options: {
name: "static/media/[name].[hash:8].[ext]",
},
},
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve("url-loader"),
options: {
name: "static/media/[name].[hash:8].[ext]",
},
},
],
},
};
Solution 10:[10]
Create a folder and name it as images.ts
or images.js
in your assets folder or anywhere you wish.
Export all images in a folder using the export {default as imageName} from 'route'
statement.
export { default as image1 } from "assets/images/1.png";
export { default as image2 } from "assets/images/2.png";
export { default as image3 } from "assets/images/3.png";
export { default as image4 } from "assets/images/4.png";
then import images using the import {imageDefaultName} from 'route'
import {image1,image2,image3,image4} from 'assets/images'
<img src={image1} />
<img src={image2} />
<img src={image3} />
<img src={image4} />
OR
import * as images from 'assets/images'
<img src={images.image1} />
<img src={images.image2} />
<img src={images.image3} />
<img src={images.image4} />
Solution 11:[11]
Move the image(s) to /public/images folder. Add path in src
as 'images/[filename]'
<img src='images/linux_logo.jpg' alt='NA'/>
Solution 12:[12]
Simple way is using location.origin
it will return your domain
ex
http://localhost:8000
https://yourdomain.com
then concat with some string...
Enjoy...
<img src={ location.origin+"/images/robot.svg"} alt="robot"/>
More images ?
var images =[
"img1.jpg",
"img2.png",
"img3.jpg",
]
images.map( (image,index) => (
<img key={index}
src={ location.origin+"/images/"+image}
alt="robot"
/>
) )
Solution 13:[13]
Solved the problem, when moved the folder with the image in src folder. Then I turned to the image (project created through "create-react-app")
let image = document.createElement("img");
image.src = require('../assets/police.png');
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow