将动态图像添加到数组

Question

在我添加产品的全局反应项目数组中，我有这样的东西：

   const ProductContext = createContext();

   export const ProductProvider = ({ children }) => {
   const [products, setProducts] = useState([
     {brand: 'The North Face', image: p1, price: '129,99', back_image: p1_back,},
   ]);

数组有效，但我试图动态添加图像，而不是手动将每个产品的相应图像写入数组（图像：“p1”。p1是为第一个产品导入的图像的名称）。目标是将图像与产品 ID 动态关联。我已经以这样的动态方式设置了每个产品的 id ；

    let idCounter = 1; 
    for (let i = 0; i < products.length; i++) {
      if (!products[i].id) {
        products[i].id = 'p' + idCounter;
        idCounter++;
      }
    }

可以看到，第一个p1产品没有id，但是这样会动态分配给它。我想要这样的东西，但是为了图像

所以，我想要一些东西，允许我只导入图像，例如 p1 和 p1_back，并自动将它们的 id 分配给数组的相应产品、数据图像：“ ”，以及 2 个图像背面图像“”。我尝试过使用 id 的方案，但这不起作用。在我的网站上，图像没有出现。这是我尝试过的（仅适用于“图像”，不适用于 back_image）。

  let imageCounter = 1;
  for (let i = 0; i < products.length; i++) {
    if (!products[i].image) {
      products[i].image = 'p' + imageCounter;
      imageCounter++;
    }
  }

进口是这里

       import p1 from './pagescomponents/images/productimages/p1.png';
       import p2_dietro from  './pagescomponents/images/productimages/p2_dietro.png';

问题不在于数组或其他什么，因为其他数据如 id、brand 工作正常。

请帮助我。谢谢你的时间

Answer 1

我相信您正在寻找的是“动态导入”图像，而不是动态分配导入。大致如下：

const images = await Promise.all(products.map(async (product, i) => {
  return {
    ...product,
    image: await import(`./pagescomponents/images/productimages/p${i + 1}.png`),
  };
}));

请注意，您的构建工具本身可能不支持此功能，因此您可能需要在那里做一些调整才能获得正确的设置/加载器。

Answer 2

首先，创建一个包含图像所有细节的对象数组。 即：

const ImagesData = [{ id: 1, img: '/path-to-your-image', ...other_Details}]

并根据react渲染使用它

<div>
{ImagesData.map(data => <img key={data.id} src={require(data.img)} />}
</div>