15

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>
);
Isaac
  • 8,290
  • 6
  • 32
  • 69
Josue Toledo
  • 179
  • 2
  • 8
  • 1
    Parcel supports importing asset files with `import` syntax. But the path must be a string. `import image from 'path/to/image.png'` – Håken Lid Oct 16 '18 at 18:28

2 Answers2

19

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} />
AmerllicA
  • 15,720
  • 11
  • 72
  • 103
Siya
  • 3,975
  • 1
  • 15
  • 36
  • 1
    For Parcel 2 use `import image from 'url:path/to/image.png';` . Source: https://v2.parceljs.org/recipes/image/ – Milanka Mar 08 '21 at 12:16
1

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.

AmerllicA
  • 15,720
  • 11
  • 72
  • 103