反应，无法导入阵列内的本地图像以循环循环

发布于 2025-02-07 12:07:22 字数 972 浏览 2 评论 0原文

我正在学习React.js并旨在制作产品页面，并且我从当地目录中导入图像有一些问题。这些来自我的实际项目，但这是一个在线编辑器，但是应该没问题，因为这是同一问题。这些是我的文件：

我的app.js：

import "./styles.css";
import Images from "./Images";

export default function App() {
  return (
    <div className="container">
      {Images.map((content) => (
        <div className="product-image">
          <img src={content.image} />
        </div>
      ))}
    </div>
  );
}

我的images.js：

const Images = [
  {
    id: 1,
    image: "./img/img1.jpg"
  },
  {
    id: 2,
    image: "./img/img2.jpg"
  },
  {
    id: 3,
    image: "./img/img3.jpg"
  }
];

export default Images;

for image.js，这很奇怪，因为如果我将映像源用于URL格式，它可以正常工作。本地目录名称应该不是问题，因为这是我在项目中导入其他资源的地方。任何帮助将不胜感激。

原文

I am learning React.js and aiming to make a product page, and I have some issues with importing images from my local directory. These are from my actual project, but it's an online editor, but it should be fine because it's the same issue.
These are my files:

My App.js:

import "./styles.css";
import Images from "./Images";

export default function App() {
  return (
    <div className="container">
      {Images.map((content) => (
        <div className="product-image">
          <img src={content.image} />
        </div>
      ))}
    </div>
  );
}

My Images.js:

const Images = [
  {
    id: 1,
    image: "./img/img1.jpg"
  },
  {
    id: 2,
    image: "./img/img2.jpg"
  },
  {
    id: 3,
    image: "./img/img3.jpg"
  }
];

export default Images;

For Image.js, It is weird because if I make the image source to a url format, it works fine. The local directory name shouldn't be a problem because that's where I imported other sources in my project. Any helps would be appreciated.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

你丑哭了我 2025-02-14 12:07:22

为此，您有两种选择，要么将img文件夹放入public文件夹中，然后更改images.js：

const Images = [
  {
    id: 1,
    image: "/img/img1.jpg"
  },
  {
    id: 2,
    image: "/img/img2.jpg"
  },
  {
    id: 3,
    image: "/img/img3.jpg"
  }
];

export default Images;

或将IMG在src内部进行和更改images.js对此：

import img1 from "./img/img1.jpg";
import img2 from "./img/img2.jpg";
import img3 from "./img/img3.jpg";
const Images = [
  {
    id: 1,
    image: img1
  },
  {
    id: 2,
    image: img2
  },
  {
    id: 3,
    image: img3
  }
];

export default Images;

请参阅此堆栈溢出 qa 知道为什么会这样。

For this to work, you have two choices, either you put your img folder inside public folder and change Images.js to this:

const Images = [
  {
    id: 1,
    image: "/img/img1.jpg"
  },
  {
    id: 2,
    image: "/img/img2.jpg"
  },
  {
    id: 3,
    image: "/img/img3.jpg"
  }
];

export default Images;

Or you keep img folder inside src and change Images.js to this:

import img1 from "./img/img1.jpg";
import img2 from "./img/img2.jpg";
import img3 from "./img/img3.jpg";
const Images = [
  {
    id: 1,
    image: img1
  },
  {
    id: 2,
    image: img2
  },
  {
    id: 3,
    image: img3
  }
];

export default Images;