从网页标签内容里获取图片

场景描述

很多时候,我们后台数据库里会保存网页标签内容,方便 APP 端或者网页端显示动态页面,存放的内容例如:<p>message</p><p><img src="123-456-789.jpg" title="图片"/></p> 。让我们从内容中获取图片的路径作为标题图片。

功能实现

  • 方法一
    使用字符串截取的方式进行截取:
int startIndex = content.indexOf("img src=");
int endIndex  = content.indexOF(" title");
imageUrl = content.substring(startIndex, endIndex);

然而,当 title 的位置不固定的时候,这种方法就不适用了。为了保险起见,使用正则表达式可能会更好。

  • 方法二
    使用正则进行筛选
private String getImageUrl(String htmlString) {
      String imagePic = "";
      Set<String> pictures = new HashSet<>();
      String img = "";
      Pattern img_p ;
      Matcher img_m;
      String regEx_img = "<img.*src=\".*?>";
      img_p = Pattern.compile(regEx_img,Pattern.CASE_INSENSITIVE);
      img_m = img_p.matcher(htmlString);
      while (img_m.find()){
           img = img_m.group();
            Matcher matcher = Pattern.compile("src=\"?(.*?)(\"|>|\\s+)").matcher(img);
          while (matcher.find()){
               pictures.(matcher.group(1));
          }
      }

      for (String pic : pictures) {
           if (pic!=null) {
                imagePic = pic;
                return imagePic;
          }
      }
    return imagePic;
}

使用这种方式就可以随时随地的获取图片的路径了。其中 pictures 就是获取标签内容中所有的图片路径。

坚持看书,坚持学习,每天进步一小步,就会进步一大步。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 要从接口获取图片信息并显示在网页上,可以使用JavaScript中的XMLHttpRequest对象或Fetch API来获取图片数据,并将其设置为<img>元素的src属性值。以下是一个基本的示例代码: ```html <!DOCTYPE html> <html> <head> <title>显示图片</title> </head> <body> <img id="myImage" src="" alt="图片"> <button onclick="loadImage()">加载图片</button> <script> function loadImage() { var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://example.com/api/image', true); xhr.responseType = 'blob'; xhr.onload = function(e) { if (this.status == 200) { var blob = this.response; var img = document.getElementById('myImage'); img.onload = function(e) { window.URL.revokeObjectURL(img.src); // 释放内存 }; img.src = window.URL.createObjectURL(blob); } }; xhr.send(); } </script> </body> </html> ``` 在上面的示例中,当用户单击“加载图片”按钮时,`loadImage()`函数将被调用。该函数创建了一个XMLHttpRequest对象,并向指定的API端点发送GET请求。响应数据以二进制格式返回,因为图片数据通常是二进制格式的。一旦收到响应,函数将响应数据转换为Blob对象,并用URL.createObjectURL()方法将Blob URL分配给<img>元素的src属性。这将在面上显示图片。 请注意,由于Blob URL使用内存,因此在图像加载完成后,我们使用window.URL.revokeObjectURL()方法将其释放。这是一个良好的做法,以确保内存不会被滥用。 ### 回答2: 要从接口获取图片信息并显示在网页上,首先需要通过编程语言(如JavaScript)使用XMLHttpRequest或fetch等工具来请求接口,并获取返回的数据。在请求中,需要指定接口的地址、请求方法(通常为GET)和其他必要的参数。 接口返回的数据通常是JSON格式的,因此需要将返回的数据进行解析,以获取图片的URL或其他相关信息。可以使用JSON.parse()函数解析返回的数据。 接下来,可以在网页上创建一个HTML元素(如<img>元素),并将获取到的图片URL赋值给该元素的src属性,就可以在网页上展示图片了。 在代码中可以使用DOM操作来动态创建、修改HTML元素。先找到要插入图片的位置(如一个<div>元素),可以通过document.getElementById()或其他相关方法找到该元素。然后,使用createElement()函数创建<img>元素,并设置其src属性为获取到的图片URL,最后使用appendChild()将<img>元素添加到<div>元素中即可。 如: ``` // 请求接口并获取数据 fetch('接口地址') .then(function(response) { return response.json(); }) .then(function(data) { // 解析数据,获取图片URL var imgUrl = data.imgUrl; // 在网页上展示图片 var imgElement = document.createElement('img'); imgElement.src = imgUrl; // 找到图片展示的位置,添加图片元素 var container = document.getElementById('图片容器的ID'); container.appendChild(imgElement); }) .catch(function(error) { console.log(error); }); ``` 以上是简单的示例代码,具体的实现方法可能会根据实际情况有所不同。需要根据接口的具体返回数据结构和网页的实际情况进行相应的调整和修改。 ### 回答3: 要从接口获取图片信息并显示在网页上,可以按照以下步骤进行操作: 首先,需要使用前端技术如HTML和JavaScript来创建一个网页。在网页中,可以使用HTML的<img>标签来显示图片,并为该标签指定一个id,以便于后续的操作。 接下来,在JavaScript中,使用XMLHttpRequest或Fetch等工具,通过调用接口的URL来发送HTTP请求,以获取图片信息。可以使用GET请求,并设置合适的请求头和参数,以确保能够获取到所需的图片信息。 当从接口获得响应后,可以通过解析响应体中的数据来获取图片的URL或数据。根据接口返回的数据格式,可能需要进行适当的处理,如JSON解析,以获取图片的URL或数据。 接下来,可以通过JavaScript来操作网页中的<img>标签,将获取到的图片URL或数据赋值给<img>标签的src属性,从而实现在网页上显示图片。 最后,通过将上述的网页部署到服务器上,并通过浏览器打开网页,即可在网页上看到从接口获取到的图片信息。 需要注意的是,通过接口获取图片信息可能涉及到安全性和权限问题,需要确保有合适的授权,并遵循相关的API使用规定。另外,获取到的图片信息的展示方式可以根据实际需要进行调整,如调整图片大小、添加图片描述等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值