vue-cli中本地图片资源路径问题

首先说一下,本人是一个刚开始学vue没多久的新手,在中会记录一下自己学习vue中遇见的问题,同大家分享一下。

在看完vue以及vuex等的相关文档后,准备写一个个人博客练练手。在博客中写了一个轮播后,却是遇见了一个问题,那就是图像的路径是动态添加的,在网页中并不显示图像文件。


vue-cli中本地图片资源路径问题_第1张图片
图像数据信息

经过在网上进行了一番搜索,寻找到了两种可以解决该问题的方法。

第一种就是使用require将图像导入

vue-cli中本地图片资源路径问题_第2张图片
require方法

该方法将图像路径当作模块, url-loader就能对图像路径进行处理,添加hash值

第二种方法是将图像保存在src文件夹同级目录下的static文件夹中

vue-cli中本地图片资源路径问题_第3张图片
项目文件结构图

static目录下新建一个文件夹 image保存图像文件,而后在更改图像的路径:
vue-cli中本地图片资源路径问题_第4张图片
图像路径信息

使用该方法引入的图像,并不会有模块处理操作,所以在页面中的路径是不包含hash值的。

本文参考:vue-cil和webpack中本地静态图片的路径问题解决方案

你可能感兴趣的:(vue-cli中本地图片资源路径问题)