如何在没有导入或组件的情况下动态分配图像src答案

【问题标题】：How to assign image src dynamically without import or component in react如何在没有导入或组件的情况下动态分配图像src
【发布时间】：2020-08-23 16:44:23
【问题描述】：

我需要帮助来显示没有导入或任何外部组件的图像。我已经尝试了以下所有方法，但都没有成功。非常感谢您就此事提供任何帮助。

当我使用 require() 时，我收到错误找不到模块 '../assets/images/products

import React from "react";
    
export default function ProductGallery() {
  const products = [
    {
      ProductImage: "../assets/images/products/image1.jpg",
    },
    {
      ProductImage: "../assets/images/products/image2.jpg",
    },
  ];

  return (
    <div className="row">
      {products.map((item, index) => (
        <div className="galleryBox" key={index}>
          <img src={require(item.ProductImage)}/>
          <img src={require(""+item.ProductImage)}/>
          <img src={require(`${item.ProductImage}`)}/>
          // all the three methods didnt work
          <img src={item.ProductImage}/>
          // this doesnt show image at all. When I Inspect, it shows the path correct. But it should come from ../static, however it showing actual path
        </div>
      ))}
    <div>
  );
}

【问题讨论】：

标签： reactjs

【解决方案1】：

Ciao，很遗憾require 函数不接受动态资源。问题与 require 函数将在运行前加载，如果当时没有找到资源，它就不起作用。

一种可能的解决方法是使用您需要的所有资源创建一个对象，例如：

export default resources = {
   image1: require('../assets/images/products/image1.jpg'),
   image2: require('../assets/images/products/image2.jpg')
}

然后在你的组件中导入这个对象并像这样使用它：

<img src={resources.image1}/>
<img src={resources.image2}/>

这是我发现使用 require 函数获得动态资源的唯一方法。

【讨论】：

导出默认资源 = { image1: require('../assets/images/products/image1.jpg'), image2: require('../assets/images/products/image2.jpg ') } 但这即将到来，它将来自后端。稍后我会将其分配给来自后端的数据。
在这种情况下，我可能无法使用require
对不起，我不明白。什么来自支持？ resources 它只是一个对象，您可以在项目的单独文件中初始化并导入需要显示 image1 或 image2 的组件中。
我将从我的 api 获取这个图像资源作为 json 数据。所以 json 数据看起来像 products 数组。
好的，明白了。问题变得更难了。但是让我更好地理解：您的图像在“../assets/images/products/image1.jpg”中，这是您项目中的一个文件夹，然后您要求后端为您提供这些资源的路径对吗？

【解决方案2】：

将图片放在Public文件夹中，这样引用路径就可以拉取图片了。

【讨论】：