react 动态生成图片路径问题

react 动态生成图片路径问题_第1张图片
图1

我们可以在图1中看到img的路径是动态生成的,图片的路径写在了一个json对象中,这样看上去好像没有什么问题,但是当你运行项目时候,它会找不到图片,这是为什么呢?
因为我们都是用webpack来打包react代码的,所以'../../../img/jinxiao.png'等路径都会以字符串的形式打包,只有通过require('../../../img/jinxiao.png'),webpack才会将相关的图片一起打包,这样才能找到图片,否则是不会处理图片信息的。
将图1的图片路径改成下图的样子即可。


react 动态生成图片路径问题_第2张图片
图2

你可能感兴趣的:(react 动态生成图片路径问题)