如何下载网页js里的图片不显示图片

如何下载网页js里的图片不显示图片

下载网页JS里的图片不显示图片的方法有：利用浏览器开发者工具、使用网页抓取工具、编写自定义脚本、利用第三方插件。最推荐的方法是利用浏览器开发者工具，因为它是最简单且直接的方法，适合大多数用户使用。下面将详细介绍如何使用浏览器开发者工具下载JS里的图片。

一、利用浏览器开发者工具

现代浏览器都提供了强大的开发者工具，可以帮助我们查看网页的源代码、网络请求等信息。通过这些工具，我们可以找到隐藏在JS代码里的图片地址并手动下载。

1、打开开发者工具

在浏览器中打开你想要下载图片的网页，右键点击网页空白处，然后选择“检查”或按F12快捷键打开开发者工具。

2、查看网络请求

在开发者工具中，切换到“网络”或“Network”选项卡。然后刷新页面，浏览器会记录所有的网络请求。通过过滤图片文件类型，你可以找到所有被加载的图片。

3、找到图片地址

通过查看网络请求的详细信息，你可以找到图片的URL地址。右键点击想要下载的图片请求，并选择“打开链接”或“Copy link address”来获取图片的URL。

4、手动下载

打开一个新的浏览器标签页，粘贴复制的图片URL地址，然后按回车键。图片将会显示在新的标签页中，右键点击图片并选择“另存为”或“Save As”来保存图片到本地。

二、使用网页抓取工具

对于需要下载大量图片的情况，可以考虑使用一些网页抓取工具，这些工具可以自动化地完成下载任务。

1、选择合适的工具

有很多网页抓取工具可以选择，如Scrapy、BeautifulSoup等。这些工具可以帮助你自动化下载图片。

2、编写抓取脚本

你需要编写一个脚本来抓取网页中的图片。以下是一个简单的Python示例，使用BeautifulSoup和requests库：

import requests
from bs4 import BeautifulSoup
url = 'https://example.com'
response = requests.get(url)
soup = BeautifulSoup(response.text, 'html.parser')
假设图片在img标签中
images = soup.find_all('img')
for img in images:
    img_url = img['src']
    img_data = requests.get(img_url).content
    with open('downloaded_image.jpg', 'wb') as handler:
        handler.write(img_data)

三、编写自定义脚本

如果你对编程有一定了解，你可以编写自定义脚本来下载图片。使用Python、JavaScript等语言都可以实现。

1、Python脚本

Python提供了很多方便的库，如requests、BeautifulSoup等，可以帮助你方便地抓取网页数据。

import requests
import re
url = 'https://example.com'
response = requests.get(url)
使用正则表达式找到图片URL
img_urls = re.findall(r'<img[^>]+src="([^">]+)"', response.text)
for img_url in img_urls:
    img_data = requests.get(img_url).content
    with open('downloaded_image.jpg', 'wb') as handler:
        handler.write(img_data)

2、JavaScript脚本

你也可以编写JavaScript脚本，通过浏览器控制台直接运行。

let images = document.querySelectorAll('img');
images.forEach((img, index) => {
    let imgUrl = img.src;
    fetch(imgUrl)
        .then(res => res.blob())
        .then(blob => {
            let a = document.createElement('a');
            a.href = URL.createObjectURL(blob);
            a.download = `image_${index}.jpg`;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
        })
        .catch(console.error);
});

四、利用第三方插件

对于不想编写代码的用户，可以使用浏览器插件来完成图片下载。

1、选择插件

有很多浏览器插件可以帮助你下载网页图片，如“Image Downloader”、“Fatkun Batch Download Image”等。

2、安装并使用

在浏览器扩展商店中搜索并安装你选择的插件。安装完成后，打开你想要下载图片的网页，使用插件提供的功能来下载图片。

五、综合管理工具的使用

对于项目管理和协作需求，推荐使用以下两个系统：

1、研发项目管理系统PingCode

PingCode提供了强大的项目管理功能，适合研发团队使用。它支持任务分配、进度跟踪、代码管理等功能，可以帮助团队高效协作。

2、通用项目协作软件Worktile

Worktile是一个通用的项目协作工具，适合各种类型的团队使用。它提供了任务管理、文件共享、日程安排等功能，可以帮助团队更好地协作和沟通。

结论

总结来说，下载网页JS里的图片不显示图片的方法有很多种，最推荐的方法是利用浏览器开发者工具，因为它简单且直接。对于需要批量下载的情况，可以考虑使用网页抓取工具或编写自定义脚本。如果不想编写代码，也可以使用第三方插件来完成下载任务。对于项目管理和协作需求，推荐使用PingCode和Worktile。这些工具和方法可以帮助你高效地完成图片下载任务，并提升团队的协作效率。