Import image from folder in React

Question

i want to add images on my shopify module develop with react but i don't know how to import images. i have creat a folder and add an image in but I cant use it in my page.

I have forgotten an import or I have written bad something?

import { EmptyState, Layout, Page } from '@shopify/polaris';
import { ResourcePicker, TitleBar } from '@shopify/app-bridge-react';
import React from 'react';
import pdt from './images/pdt.png';

const img = '.images/pdt.png';

class Index extends React.Component {
  state = { open: false };
  render() {
    return (
      <Page>
        <TitleBar title="Dealer De Coque - Module"/>
<h1>Module DEALER</h1>
        <ResourcePicker resourceType="Product" showVariants={false} open={this.state.open} onSelection={(resources) => this.handleSelection(resources)}
          onCancel={() => this.setState({ open: false })}/>
        <Layout>
          <EmptyState heading="Ajoutez vos produits pour débuter"
            action={{
              content: 'Ajouter des produits',
              onAction: () => console.log('clicked'),
              onAction: () => this.setState({ open: true }),
            }} image={pdt} >
          <p>Vous etes seulement à quelques pas de la personnalisation de produits</p>
          <img src={images/pdt.png} alt="Logo" />;
          </EmptyState>
        </Layout>

      </Page >
    );
  }

  handleSelection = (resources) => {
    const idsFromResources = resources.selection.map((product) => product.id);
    this.setState({ open: false })
    console.log(idsFromResources)
  };
}

export default Index;

Update from Answer:

still does not work

maybe is my folder the problem ?

here the error on the application shopify page :

@ThomasHg Welcome to Stack Overflow. Please see, [What should I do when someone answers my question?](https://stackoverflow.com/help/someone-answers) Also go through the [tour] so that you will be familiar with how to use this platform. — Praveen Kumar Purushothaman, Nov 17 '20 at 12:04
@ThomasHg Did you try this - `import pdt from '../images/pdt.png';` — Sarun UK, Nov 17 '20 at 17:42

Praveen Kumar Purushothaman · Answer 1 · 2020-11-17T15:34:28.800

This is the right way of importing static assets:

import VariableName from "../relative/path/to/image.png";
import pdt from '../images/pdt.png';

Also kindly note that you need to use ../ and not ./ because images folder is not in the same directory as your JavaScript file. It's in a parent directory, so you need to use .. to move to the parent and then traverse inside images directory.

The imported variable pdt contains the full URL relative to the app for ../images/pdt.png. You just need to change:

import pdt from '../images/pdt.png';

<img src={images/pdt.png} alt="Logo" />;

Change it to:

import pdt from '../images/pdt.png';

<img src={pdt} alt="Logo" />;

score 0 · Answer 2 · answered Dec 15 '20 at 10:14

Ok I will come back to you because I solve my problem.

I had to create a "public" folder at the root of the project and in it I put my images.

then add the line: import Image from 'next / image' for import them

And get them with: <Image src =" / logo.png "alt =" me "/>

Sarun UK · Answer 3 · 2020-11-17T12:02:34.770

-1

import the image from the folder and use it as src to the <img>

import pdt from './images/pdt.png';

<img src={pdt} alt="Logo" />

edited Nov 17 '20 at 12:02

answered Nov 17 '20 at 11:49

Sarun UK

6,210
7
23
48

Better to add some text. – Praveen Kumar Purushothaman Nov 17 '20 at 11:50
yeah, i was doing that. Thanks – Sarun UK Nov 17 '20 at 11:51
1

Thanks. Looks nice now. – Praveen Kumar Purushothaman Nov 17 '20 at 11:52
Please take note that the file is in a different folder from where the pdt.png image is, so start with ```"../``` and not ```"./```! – Klem Lloyd Mwenya Sep 04 '21 at 17:42

Import image from folder in React

3 Answers3