动态导入图像(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 路径找不到模块)的主要内容,如果未能解决你的问题,请参考以下文章