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

Posted

技术标签:

【中文标题】动态导入图像(React Js)(需要 img 路径找不到模块)【英文标题】:importing image dynamically (React Js) (Require img path cannot find module) 【发布时间】:2019-02-09 18:33:52 【问题描述】:

我需要通过 map 方法从我的图像文件中动态导入图像(多个)。首先,我想为我的图像文件设置一个基本 URL,然后从包含图像属性的 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;

不幸的是,我遇到了这个错误: 在此先感谢并为我的英语不好感到抱歉:)

【问题讨论】:

这个import("../../components/assets/images/") 你认为这会以某种方式指定一个文件夹供以后使用...? 如果你想要做的事情完全可以工作,你必须先将baseURL和图像文件名组合成一个有效的路径,然后导入它。跨度> 【参考方案1】:

在尝试了各种解决方案之后,包括反引号 等,都没有任何效果。我不断收到错误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] />

【讨论】:

【参考方案2】:

这就是我发现的,它对我有用。

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

在终端中运行:

npm run eject

检查config/webpack.config 中的文件加载器并找到文件加载器配置。我所做的是,我按照那里的符号创建了一个名为 static/media/your_image_name.ext 的目录:

options: 
    name: "static/media/[name].[hash:8].[ext]"

然后像这样导入这张图片

import InstanceName from "static/media/my_logo.png";

黑客愉快!

【讨论】:

【参考方案3】:

即使我遇到了同样的错误

gallery.map((ch, index) => ....

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

这里出错了,我用的是src而不是ch

Error
<Image src=src.image />
Solved
<Image src=ch.image />

【讨论】:

【参考方案4】:

导入不是那样工作的。您可以使用这样的基本 URL:

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   src=require( props.src ) />

因为require 想要一个绝对路径字符串,而前两个可以做到这一点。

【讨论】:

谢谢,但我遇到了另一个错误:未捕获的错误:找不到模块'/static/media/blue-stripe-stoneware-plate.8bf3a194.jpg,/static/media/hand-painted -blue-flat- 你能用你当前的代码更新你的问题吗?看起来要求是可以的。这些名称是动态的,并被 CRA 使用(可能是 Webpack 后面)。l 这个文件在你的目录结构中的什么位置? /src/components/assets/images 不,我的意思是你使用图像的这个组件的文件位置。

以上是关于动态导入图像(React Js)(需要 img 路径找不到模块)的主要内容,如果未能解决你的问题,请参考以下文章

如何在 React 中动态导入图像?

React,Sass,从 .scss 文件导入 img 时出错

React.js 无法动态应用 CSS 类

在 React 中用 img 填充 div

在 React 中动态渲染图像非常困难

使用 REACT 在 div 中显示背景图像的问题