react 动态生成图片路径问题

图1

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


图2
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • webpack-react之webpack篇（上）
    构建一个小项目——FlyBird，学习webpack和react。（本文成文于2017/2/25） 从webpac...
    布蕾布蕾阅读 16,878评论 31赞 98
  • webpack 从入门到工程实践
    GitChat技术杂谈 前言 本文较长，为了节省你的阅读时间，在文前列写作思路如下： 什么是 webpack，它要...
    萧玄辞阅读 12,715评论 7赞 110
  • webpack介绍、配置、使用
    版权声明：本文为博主原创文章，未经博主允许不得转载。 webpack介绍和使用 一、webpack介绍 1、由来 ...
    it筱竹阅读 11,233评论 0赞 21
  • webpack教程
    无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅，特此分享以备自己日后查看，也希望更多的人看到...
    小小字符阅读 8,227评论 7赞 35
  • 念
    你走后的第一天。 春日里有暖阳，草木萌发了新芽，被微风拂过头发和脸颊。 那么此刻，你在干嘛。
    芝士蛋糕梅子酒阅读 185评论 0赞 0