How to add image in react by using parcel?

Asked 16/10, 2018 at 18:22 Answered 13/1 at 14:57

Solved javascript reactjs web-component parceljs

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

Spew answered 16/10, 2018 at 18:22 Comment(1)

Parcel supports importing asset files with import syntax. But the path must be a string. import image from 'path/to/image.png' – Cartogram 16/10, 2018 at 18:28

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

Transistor answered 16/10, 2018 at 18:25 Comment(1)

For Parcel 2 use import image from 'url:path/to/image.png'; . Source: v2.parceljs.org/recipes/image – Infiltration 8/3, 2021 at 12:16

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.

Slash answered 16/10, 2018 at 18:34 Comment(0)

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

Flurried answered 4/5, 2023 at 18:21 Comment(0)

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

Darleen answered 30/8, 2023 at 14:24 Comment(0)

It happened to me use this:

<img className="res-logo" src={require('/images/download.jpg')}/>

if your images are in a folder then install 2 packages through the terminal.

npm: https://www.npmjs.com/package/url-loader
npm file loader: https://www.npmjs.com/package/file-loader

Nussbaum answered 13/1 at 14:57 Comment(0)

Recommended topics

Hot tags