使用vue-cli3.0搭建项目引入静态图片资源出现的问题


#1

问题:

在使用vue开发项目时,可以通过两种方式引入图片静态资源:
1.img标签引入
该方法有一个问题,引入同级目录的图片时,图片的路径会被固定解析为 【 项目部署路径+图片名称 】,具体如下:
%E5%9B%BE%E7%89%87
%E5%9B%BE%E7%89%87
该图片的引入路径为:http://localhost:8080/download4.jpg

图片显示失败。

2.元素(如div,span)通过【background-image:url("…")】属性引入
图片显示失败,
图片引入路径被解析为:http://localhost:8080/img/download4.jpg
具体如下:
%E5%9B%BE%E7%89%87

%E5%9B%BE%E7%89%87

%E5%9B%BE%E7%89%87

有什么方法可以通过相对路径引入图片资源,可以直接在同级目录下引入图片?


2019.2.1下午重新编辑:
我使用行内元素【em style=“background:url(’…’)”></em】再来显示图片,图片会自动解析为base64格式。


#2

额。。。怎么没有人。


#3

請問是類似這個問題嗎?
https://blog.csdn.net/jian_xi/article/details/70158952


#4

非常感谢,这个方法是可以的。
我想了解说可以通过修改vue-cli3.0的配置,直接引用同级目录的图片,这样同个组件的图片和vue文件可以放在一起。


#5

所以問題已經解決了嗎? 我似乎找到一個你想要的答案

https://blog.csdn.net/julystroy/article/details/82899449


#6

目前因为东西有些多,我暂时先跳过这个问题。
图片引入目前是直接访问服务器的图片 ——> 【img src=“服务器图片地址”】。

你刚刚找的这个解决方案我看了,针对我这个问题来说,有两个问题:
(1)应该是vue-cli2.0的攻略,3.0的目录结构改了。(还是要去看vue-cli3.0的官方文档)
(2)他提供的解决方案的结果为:将图片资源放在asset和static文件夹里。还是不能直接在同一目录下引入。

还是很感谢你,等回过头来解决了这个问题,我会告知解决方案。
再次感谢。