问题提出:
在前端使用vue框架的v-html标签进行渲染的时候,<img>
中的图片不能正常显示,
问题分析:
本项目是从原先的前后端一体的项目中迁移过来的,我们仍用的老式的思维,觉得应该再前端项目中找到合适的位置存放图片文件 所以做了如下测试:
<p><img src="aaa"></p>
<p v-html="qqq"></p>
<p v-html="ppp"></p>
data:{
aaa:'../../../static/ckupload/123.png',
qqq:'<img src="http://********/ckupload/123.JPG">',
ppp:'<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565236191&di=3807861c847024b0a5ff4f7cd3f81296&imgtype=jpg&er=1&src=http%3A%2F%2Fcs.vmovier.com%2FUploads%2Fpost%2F2015-05-07%2F554b345145668.jpg" /></p>',
}
结果可想而知,本地并不能加载出图片资源,只有网络资源才能顺利加载出来。
所以目标转向把图片存储在服务器上,通过直接访问服务器资源从而获取到图片。
通过测试,发现使用 以http://
开头的绝对路径可以正常显示,所以,解决的方案为 将本地图片转为以http为开头的绝对路径。
//注意这里不能用绝对路径,都是踩坑踩过来的,使用绝对路径会使数据库迁移的时候出现严重的问题!!
解决方案:
- 如何让图片的路径为 http开头呢? 需要一个 图片服务器,通过查询资料,发现nginx可以作为图片服务器。
- 我们应该如何解析v-html中的src图片路径呢? 需要使用HTML解析器,本项目使用Java实现,所以采用Jsoup解析。
问题解决:
1、首先,服务器的操作系统是 ubuntu 16.04,通过 sudo apt-get install nginx
就可以安装稳定版的nginx的服务器啦
2、在安装完nginx后,需要在配置文件中添加对应的信息。ubuntu系统中,nginx.conf 的位置在 /etc/nginx/nginx.conf
,打开这个文件,在http中新建一个server,在server中填写图片服务器的相关配置,
#文件第一行 根据用户选择
#如果是普通用户,不用管
#如果是root用户,注释掉第一行,改写为 user root;
#否则可能会访问403错误
{
listen 2048;
server_name localhost;
location /ckupload/
{
alias /root/TestCase_picture/ckupload/;
autoindex on;
}
}
listen 表示最终的图片服务器的端口, server_name 表示配置的虚拟主机,这里因为就用本机,所以写localhost 就ok啦。 location 表示访问的路径, 这里其实有两种配置方式: root响应的路径:配置的路径(root指向的路径)+完整访问路径(location的路径)+静态文件 alias响应的路径:配置路径+静态文件(去除location中配置的路径), 也就是说: 如果用root ,则对应的实际图片路径为 /root/TestCase_picture/ckupload/chupload,显然路径是错误的,所以,在配置过程中,选用了 alias ,则实际路径为 /root/TestCase_picture/ckupload
这样就配置好了,需要注意的是,在完成配置之后,别忘了 还要给 文件夹 读写权限。
3、jsoup
jsoup是一款Java的HTML解析器,主要用来对HTML解析。所以,通过jsoup就可以解决问题啦!!!!!!!1
//jsoup 处理html中img路径问题
public static String setImagesDomain(String htmlStr){
Document doc = Jsoup.parse(htmlStr);
Elements srcs = doc.select("img[src]");
String domainStr="http://localhost:2048";
for (Element element : srcs) {
String imgUrl = element.attr("src");
if (imgUrl.trim().startsWith("/")) {
imgUrl =domainStr + imgUrl;
element.attr("src", imgUrl);
}
}
return doc.toString();
}
这样,就可以提取出src中的图片路径,顺利读到图片的位置进行显示。
结语
至此,关于SpringBoot+Vue+Nginx的开发模式中,关于图片存放位置和解析方法就可以完美解决了~