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

Question

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

22

我需要使用映射方法动态地从我的图像文件中导入多个图像。首先，我想将一个基本的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，例如从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;

不幸的是，我遇到了这个错误：非常感谢您的提前帮助，对我的糟糕英语表示抱歉 :)

- Vahid

这个 import("../../components/assets/images/") 你认为这会指定一个文件夹以供后续使用吗...? 如果你想要做的事情能够正常工作，你必须先将 baseURL 和图像文件名组合成一个有效的路径，然后再进行导入。 - user5734311

我今天遇到了同样的问题，你在过去的两年中找到解决方案了吗？ :) - Andreas G.

哈哈，我不确定，如果我记得正确的话，基本URL解决方案起作用了。 - undefined

9个回答

1

尝试这个动态图片的解决方案：

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

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

- Codex R

1

在尝试了各种解决方案之后，包括反引号<img src={require(`${ props.imageSource }`)}和其他一些方案，仍然无法解决问题。即使我的相对路径都正确，我仍然收到“找不到模块”的错误提示。我找到的唯一原始解决方法是，如果您有相对较少的可能图片，请预定义一个映射到实际导入的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]} />

- gene b.

0

我在项目中解决了这个 TypeScript 的问题。希望这对您有所帮助。

export const countryData = {
'sl': { name: 'Sri Lanka', flag: '/flag-of-Sri-Lanka.png' },
'uk': { name: 'UK', flag: '/flag-of-United-Kingdom.png' },
'usa': { name: 'USA', flag: '/flag-of-United-States-of-America.png' },
'ca': { name: 'Canada', flag: '/flag-of-Canada.png' },
'It': { name: 'Italy', flag: '/flag-of-Italy.png' },
'aus': { name: 'Australia', flag: '/flag-of-Australia.png' },
'me': { name: 'Middle East', flag: '/flag-of-Middle-East.png' },
'other': { name: 'Other', flag: '/flag-of-World.png' }, };

"

双引号内URL的一部分+通过变量生成的动态URL组合对我很有用。

"

<Avatar src={require('../assets'+countryData['uk']['flag'])} />

- Milan

0

  //json data.
  "ProductSlider":[
              {
                "image":"Product1.jpg"
              },
              {
                "image":"Product2.jpg"
              }]
   //mapping data list in parent component.
    {sliderData.map((data) => (
            <SwiperSlide className='w-10 '>
            <ProductCard data={{imgSrc: data.image}}  />
            </SwiperSlide>
          ))}
        
    //child component(linked image).
        import React from 'react'
        import { CardImg } from 'react-bootstrap'
        
        export default function ProductCard(props) {
          let {imgSrc} = props.data;
        
          return (
            <div className="overflow-hidden">  
              <div className='overflow-hidden bg-grey opacity-card' >
                <CardImg  
                      variant='top'
                      src={require(`../assets/images/${imgSrc}`)}
                     />
              </div>
              <div className='text-center p-1 opacity-card-title' >
                <div>Add to cart</div>
              </div>
            </div>
          )
        }

- Pooja

1

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community

0

如果您的图像在src文件中，则尝试以下方式： {props.name}

- Refayth Hossian

0

这是我发现的方法，并且对我起了作用。

"file-loader": "4.3.0" React: 16.12

在终端中运行以下命令：

npm run eject

请检查位于config/webpack.config的file-loader以及其配置。我所做的是，按照那里的规定创建了一个名为static/media/{your_image_name.ext}的目录：

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

然后像这样导入了这张图片

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

愉快地编程！

- Ali Raza

0

我在我的React应用程序中也遇到了相同的问题。我尝试解决了这个问题，最后找到了一个解决方案。

这个方法对我有效。我希望它对你也有效。

我将那张图片的文件夹放在了我的xyz.js文件所在的位置。

之前：不起作用

/imgfolder
/workingfolder
    index.js

工作后：- 工作

/workingfolder
    /imgfolder
    index.js file

我觉得如果图片在工作文件夹之外，它可能无法正常工作，我的假设可能是错误的，但对我来说这个方法有效。祝你有个愉快的一天，我的朋友。

- Sachin 102

-2

就算我也遇到了同样的错误

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

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

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

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

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

- Arshad

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- devserkan · Accepted Answer

导入并不是那样使用的。你可以像这样使用基础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 width="100" alt="foo" src={require( props.src )} />

由于require需要一个绝对路径字符串，而前两个方法可以解决这个问题。