Shopify Question posted in
The Shopify help center can be found here.

Import image from folder in React – Shopify

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 ?

Screen of the folder

here the error on the application shopify page :

Error in shopify

Tags:

3

Answers


  1. 0

    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" />;
    Login or Signup to reply.
  2. 0

    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" />
    Login or Signup to reply.
  3. 0

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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search