Javascript 从React中的文件夹导入图像

我想在使用react开发的

shopify

模块中添加图像，但我不知道如何导入图像。我已经创建了一个文件夹并在中添加了一个图像，但我无法在我的页面中使用它

我忘了一个要点，还是我写了一些不好的东西

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;

import{清空，布局，页面}从“@shoppify/polaris”导入；
从'@shopify/app-bridge-react'导入{resourcepiker，TitleBar}；
从“React”导入React；
从“/images/pdt.png”导入pdt；
常量img='.images/pdt.png'；
类索引扩展了React.Component{
状态={open:false}；
render（）{
返回(
模块经销商
本.handleSelection（参考资料）}
onCancel={（）=>this.setState（{open:false}）}/>
console.log（'clicked'），
onAction:（）=>this.setState（{open:true}），
}}image={pdt}>
你是不是想了解产品的个性化

;
);
}
handleSelection=（资源）=>{
const idsFromResources=resources.selection.map（（product）=>product.id）；
this.setState（{open:false}）
console.log（idsFromResources）
};
}
出口违约指数；

---

从答案更新：

还是不行

也许是我的文件夹出了问题

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

---

这是导入静态资产的正确方法：

从“./relative/path/to/image.png”导入变量名；
从“../images/pdt.png”导入pdt；

另外请注意，您需要使用

。/

而不是

/

，因为

图像

文件夹与您的JavaScript文件不在同一目录中。它位于父目录中，因此您需要使用

。

移动到父目录，然后在

图像

目录中遍历

导入的变量

pdt

包含相对于

。/images/pdt.png

应用程序的完整URL。您只需更改：

从“../images/pdt.png”导入pdt；
;

将其更改为：

从“../images/pdt.png”导入pdt；
;

从文件夹导入图像，并将其作为

src

使用到

---

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

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

然后添加行：

import Image from'next/Image'

以导入它们

---

然后用：

这行不应该

be
？@szczocik是的，没错。@ThomasHg欢迎来到堆栈溢出。请参阅，也请阅读，以便熟悉如何使用此平台。@ThomasHg您是否尝试过此-
从“../images/pdt.png”导入pdt最好添加一些文本。是的，我正在这么做。谢谢，谢谢。现在看起来不错。
import pdt from './images/pdt.png';

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