HOME/Articles/

nginx图片服务器以及jsoup处理html

Article Outline

问题提出:

在前端使用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的开发模式中,关于图片存放位置和解析方法就可以完美解决了~