vue模板中对图片src的动态引入（路径）问题

pay attention: 书写本文时vue的版本还是2.X。

在做移动端项目时，底部导航的名称和图片习惯于用json文件中引入数据。而在vue项目中，当要在中动态引入图片时，若直接从json文件中导入item.src字段为’assets/image/XX.png’的值到:src="XXX"中时，会出现图片404的情况。
如:



这么循环引入img图片，页面会报404，表明从指定的路径上去找是找不到图片的。

如何解决呢？

我们都知道，如果是import 或者 require 图片路径进来，将其保存为一个变量，然后再赋值到img标签上是没有问题的。有此可见，如果我们将json中的图片路径用import或者require的方式包装。如:src=“require(‘assets/image/my.png’)”。ok，找到解决办法了。但是我们无法在json文件中使用require或import。json是一种通用的跨平台的数据传输格式，它支持的是纯数据。好在我们可以用es6的方法，把数据存储为js文件然后export出去便可。要记住的是，此方法对于src目录下而言才是管用的。这里所谓的src是指要通过webpack打包的那个根目录。用这种方法实现，开发环境和生产环境打包都可以很好配置。

如果我们把静态图片资源存放在和src平级的目录（比如叫static）下，即不存放在webpack要打包的范围内，那么直接引入图片路径无需用import或require包装，这也是ok的。如。由于放在src目录外，它不被webpack打包进去，如此一来在部署到nginx服务器上时需要单独scp这个static目录。

作者：kup
链接：https://www.jianshu.com/p/470b0f98c8d1
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。