javascript 动态导入图像（React Js）（需要 img 路径找不到模块）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/52171142/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
importing image dynamically (React Js) (Require img path cannot find module)
提问by Vahid
I need to import images(several) from my image file dynamically by a map method. First, I want to set a base URL to my images file and then read the image's name from my JSON file which includes the image property and then set the image src accordingly. The JSON file is like below :
我需要通过地图方法从我的图像文件中动态导入图像（几个）。首先，我想为我的图像文件设置一个基本 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"
},
my images folder : 
我的图片文件夹：
I have read the products by redux which is works perfectly =>
我已经阅读了 redux 的产品，它完美无缺 =>
const products = this.props.products;
console.log(products, 'from redux');
const fetchProducts = [];
for (let key in products) {
fetchProducts.push({
...products[key]
});
}
the console.log() => 
console.log() =>
Now I want to define a base URL like this which later use as image src by adding the image's name from the JSON file in the map method :
现在我想定义一个像这样的基本 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}
/>
);
});
my Photo component looks like below :
我的照片组件如下所示：
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;
unfortunately, I have faced this error: 
Thanks in advance and sorry for my bad English :)
不幸的是，我遇到了这个错误：预先感谢并为我的英语不好:)
回答by devserkan
Import is not working like that. You can use a base URL like that:
导入不是那样工作的。您可以使用这样的基本 URL：
const baseUrl = "../../components/assets/images/";
Then you can pass to your Photocomponent like that:
然后你可以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}
/>;
Lastly, in your Photocomponent use require:
最后，在您的Photo组件中使用require：
<img src={require( `${ props.imageSource }` )} alt={props.imageAlt} />
or like that:
或者像这样：
<img src={require( "" + props.src )} alt={props.imageAlt} />
But, don't skip ""part or don't use it directly like:
但是，不要跳过""部分或不要直接使用它，例如：
<img width="100" alt="foo" src={require( props.src )} />
since requirewants an absolute path string and first two do this trick.
因为require想要一个绝对路径字符串，前两个就做这个把戏。
回答by Ali Raza
So Here is what I found and it worked for me. M on
所以这是我发现的，它对我有用。上
"file-loader": "4.3.0" React: 16.12
“文件加载器”：“4.3.0”反应：16.12
. Run this in your terminal:
. 在你的终端中运行这个：
npm run eject
check file-loader in
检查文件加载器
config/webpack.config
配置/webpack.config
and located file-loader configurations. What I did was, I created a directory called "static/media/{your_image_name.ext} following the notation there "
并定位文件加载器配置。我所做的是，我按照那里的符号创建了一个名为“static/media/{your_image_name.ext}”的目录
options: { name: "static/media/[name].[hash:8].[ext]" }"
选项：{ 名称：“静态/媒体/[名称].[哈希：8].[ext]”}”
and then imported this image like
然后像这样导入这个图像
import InstanceName from "static/media/my_logo.png";
从“static/media/my_logo.png”导入InstanceName；
Happy Hacking.
快乐黑客。
回答by Arshad
Even I got the same error
即使我得到了同样的错误
{gallery.map((ch, index) => {....
{gallery.map((ch, index) => {....
cannot find module '/../..................png'
I went wrong here, I used src instead of ch
我在这里出错了，我使用了 src 而不是 ch
Error
<Image src={src.image} />
Solved
<Image src={ch.image} />
