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>
);
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.