How to add image in react by using parcel?

Question

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 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

score 25 · Accepted Answer · edited Oct 16 '18 at 18:28

25

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} />

edited Oct 16 '18 at 18:28

AmerllicA

29,059
15
130
154

answered Oct 16 '18 at 18:25

Siya Mzam

4,655
1
26
44

6

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

AmerllicA · Answer 2 · 2018-10-16T18:42:32.933

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.

score 0 · Answer 3 · answered May 04 '23 at 18:21

use static image with parcel problem solved......

I have the same problem but you can fix it using parcel-plugin-static-files-copy package: parcel-plugin-static-files-copy. Then install by using this command npm i parcel-plugin-static-files-copy , then add this to your .parcelrc plagin

{ "extends": "@parcel/config-default", "resolvers": ["@parcel/resolver-glob", "..."] } Once enabled, you can import multiple files using a specifier like ./files/*.png. This returns an object with keys corresponding to the files names.

import * as images from './img/types/*.svg';

use--- i have images folder inside static(root) folder

i have 16 image in this images folder now i can use as their name

score 0 · Answer 4 · answered Aug 30 '23 at 14:24

As of Parcel 2, you can include images using URL. See https://parceljs.org/recipes/react/#images

const logo = new URL('logo.svg', import.meta.url);

export function Logo() {
  return <img src={logo} alt="logo" />;
}

Here's an example project layout for using js+images:

$ tree -I node_modules/ -I dist
.
├── index.html
├── package-lock.json
├── package.json
└── src
    ├── img
    │   └── logo.png
    └── js
        └── index.js

package.json:

{
  "devDependencies": {
    "parcel": "^2.9.3"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

index.html:

<!doctype html>
<html>
  <head>
    <script type="module" src="src/js/index.js"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

src/js/index.js:

import { createRoot } from 'react-dom/client'


function App() {
  const logo = new URL('/src/img/logo.png', import.meta.url)

  return <div>
    <h1>My App</h1>
    <img src={logo} alt='logo'/>
  </div>
}

const domNode = document.getElementById('root')
const root = createRoot(domNode)
root.render(<App/>)

How to add image in react by using parcel?

4 Answers4