从 React 中的文件夹导入图像 [重复]

Question

我想在我的 shopify 模块上添加图像，使用 react 开发，但我不知道如何导入图像。我创建了一个文件夹并在其中添加了一张图片，但我无法在我的页面中使用它。

我忘记了导入或者我写了不好的东西？

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;

---

答案更新：

还是不行

也许是我的文件夹有问题？

这里是应用程序shopify页面上的错误：

Answer 1

好的，我会回来找你的，因为我解决了我的问题。

我必须在项目的根目录下创建一个“公共”文件夹，并在其中放置我的图片。

然后添加行：import Image from 'next / image' 用于导入它们

并通过以下方式获取它们：<Image src =" / logo.png "alt =" me "/>

Answer 2

这是导入静态资源的正确方式：

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

还请注意，您需要使用../ 而不是./，因为images 文件夹与您的JavaScript 文件不在同一目录中。它在父目录中，所以你需要使用..移动到父目录，然后在images目录中遍历。

导入的变量pdt 包含../images/pdt.png 相对于应用程序的完整URL。你只需要改变：

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

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

改成：

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

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

Answer 3

从文件夹中导入图片并将其作为src 使用到<img>

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

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