文章列表如何实现显示缩略图？

大家好我是图恩，相信大家在浏览网站的时候会发现很多网站的文章列表都会显示一张缩略图，这张图片可以是文章内的图片，也可以是一张不相关的图片，只是为了好看才添加的。

要实现这个功能，最简单的做法就是在每一行最后添加一张静态图片，或者从几张图片中随机挑选一张，这种方案甚至不涉及后端，只需要前端定义一个数组，再从数组中获取对应的图片地址即可。

但是通过这种方案显示的图片就比较单调，每次打开页面都是那几张图片，有的甚至可能还会重复。

此时可以考虑第二种方案，也就是缩略图默认取文章内的第一张图片，这样列表的缩略图就会跟着文章内容的图片变化而变化，对用户来说会更友好，虽然用户可能不多，甚至有时候就只有作者一个人，但是每次打开页面一看到图片就能看到更多的生活气息。

要实现这个功能，主要就是截取文章内的第一张图片，以下是我用java实现的方法供参考：

public static String getImgStr(String htmlStr) {
        List<String> pics = new ArrayList<>();
        String img = "";
        Pattern p_image;
        Matcher m_image;
        //     String regEx_img = "<img.*src=(.*?)[^>]*?>"; //图片链接地址
        String regEx_img = "<img.*src\\s*=\\s*(.*?)[^>]*?>";
        p_image = Pattern.compile
                (regEx_img, Pattern.CASE_INSENSITIVE);
        m_image = p_image.matcher(htmlStr);
        while (m_image.find()) {
            // 得到<img />数据
            img = m_image.group();
            // 匹配<img>中的src数据
            Matcher m = Pattern.compile("src\\s*=\\s*\"?(.*?)(\"|>|\\s+)").matcher(img);
            while (m.find()) {
                pics.add(m.group(1));
            }
        }
        if (pics.size() > 0){
            return pics.get(0);
        }
        return "";
    }

代码主要就是通过正则把图片从Html标签内容中筛选出来放到一个List中，然后再取第一张图片就可以了。

注意不要用Set或者Map保存，因为顺序有可能发生变化，最后取的第一张图并不是文章的第一张图。

当然如果没有图片可以不显示图片。

整个流程如下：

用户上传图片（图片上传到服务器，实际提交的是图片地址）》接口接收到html内容，过滤出第一张图片》保存到数据库，单独存一个字段》查询的时候将该字段查不来供前端显示。

本文章由javascript技术分享原创和收集