Question

我需要通过映射方法从我的图像文件动态导入图像（几个）。首先，我想为图像文件设置一个基本URL，然后从包含image属性的JSON文件中读取图像的名称，然后相应地设置图像src。 JSON文件如下所示：

{
      "title": "Blue Stripe Stoneware Plate",
      "brand": "Kiriko",
      "price": 40,
      "description": "Lorem ipsum dolor sit amet...",
      "image": "blue-stripe-stoneware-plate.jpg"
    },
    {
      "title": "Hand Painted Blue Flat Dish",
      "brand": "Kiriko",
      "price": 28,
      "description": "Lorem ipsum dolor sit amet...",
      "image": "hand-painted-blue-flat-dish.jpg"
    },

我的图像文件夹：

我已阅读redux的产品，该产品非常有效=>

const products = this.props.products;
console.log(products, 'from redux'); 
const fetchProducts = [];
    for (let key in products) {
      fetchProducts.push({
        ...products[key]
      });
    }

console.log（）=>

现在，我想定义一个像这样的基本URL，之后通过在map方法中添加来自JSON文件的图像名称来用作图像src：

const baseUrl = '../../components/assets/images/';
const fetchProducts = [];
for (let key in products) {
  fetchProducts.push({
    ...products[key]
  });
}

const productCategory = fetchProducts.map((product, index) => {
  return (
    <Photo
      key={index}
      title={product.title}
      brand={product.brand}
      description={product.description}
      imageSource={baseUrl + product.image}
      imageAlt={product.title}
    />
  );
});

我的照片组件如下所示：

  const photo = props => (
  <div className={classes.Column}>
    <img src={require( `${ props.imageSource }` )} alt={props.imageAlt} />
    <div className={classes.Container}>
      <p>{props.brand}</p>
      <p>{props.title}</p>
      <p>{props.price}</p>
    </div>
  </div>
);

export default photo;

很遗憾，我遇到了以下错误：在此先感谢您，我的英语不好:)

Answer 1

导入无法正常工作。您可以使用这样的基本网址：

const baseUrl = "../../components/assets/images/";

然后您可以像这样传递给Photo组件：

<Photo
  key={index} // Don't use index as a key! Find some unique value.
  title={product.title}
  brand={product.brand}
  description={product.description}
  imageSource={baseUrl + product.image}
  imageAlt={pro.title}
/>;

最后，在您的Photo组件中，使用require：

<img src={require( `${ props.imageSource }` )} alt={props.imageAlt} />

或类似的话：

<img src={require( "" + props.src )} alt={props.imageAlt} />

但是，请勿跳过""部分或不要像以下那样直接使用它：

<img width="100" alt="foo" src={require( props.src )} />

因为require需要一个绝对路径字符串，而前两个则使用此技巧。

Answer 2

所以这是我发现的东西，它对我有用。

“文件加载器”：“ 4.3.0” 反应：16.12

。在您的终端中运行此命令：

npm run eject

在

中检查文件加载器

config / webpack.config

和找到的文件加载器配置。我所做的是，按照那里的标记

创建了一个名为“ static / media / {your_image_name.ext}的目录”。

选项：{ 名称：“静态/媒体/ [名称]。[哈希：8]。[ext]” }“

然后像这样导入该图像

从“ static / media / my_logo.png”导入InstanceName；

快乐黑客。

Answer 3

在尝试了各种解决方案后，包括反引号等，没有任何效果。我不断收到错误 Cannot find module，即使我的相对路径都是正确的。我发现的唯一原始解决方案是，如果您的可能图像数量相对较少，则是预定义一个映射到实际导入的 Map。（当然，这不适用于大量图像。）

import laptopHouse from '../../images/icons/laptop-house.svg' import contractSearch from '../../images/icons/file-contract-search.svg' .. const [iconMap, setIconMap] = useState({ 'laptopHouse': laptopHouse, 'contractSearch': contractSearch, .. }); .. <img src={iconMap[props.icon]} />

Answer 4

即使我遇到了相同的错误

{gallery.map（（ch，index）=> {....

cannot find module '/../..................png'

我在这里出错，我使用src而不是ch

Error
<Image src={src.image} />

Solved
<Image src={ch.image} />

动态导入图像（React Js）（需要img路径找不到模块）

4 个答案: