I have been trying to add image in react
. I'm not using webpack
, I'm using parceljs
. Also using typescript
I have try:
import image from path/to/image.png
<img src={image} />
inside react component:
try: <img src="path/to/image.png" />
try: <img src={"path/to/image.png"} />
Still, doesn't work.
code look sort of like this:
import * as React from 'react';
const componentName = () => (
<div>
<img src="path/to/image.png" />
</div>
);
Parcel includes an image transformer out of the box, which allows you to resize images, convert them to a different format, or adjust the quality to reduce file size. This can be done using query parameters when referencing the image, or using a configuration file.
Put the image file somewhere under the src folder. This alone will not automatically make it available, so you have to import the image into the React component where you're using it. import companyLogo from './path/to/logo.
You need to do it like this
import image from 'path/to/image.png';
And then inside your react JSX
follow below code:
<img src={image} />
It is no different between <img src="path/to/image.png"/>
and <img src={"path/to/image.png"}/>
, you should import
your image and then use it like a JavaScript
object, see below:
import somePhoto from 'path/to/image.png';
You don't attend to 'path/to/image.png';
and wrote it like nothing. input your path in a quotation mark. Then inside your react
JSX
code write your img
tag like below:
<img src={somePhoto} />
There are more different ways. in other react
projects we use another server to load the images. but the specific images for application should be like above.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With