使用requests+BeautifulSoup爬取Nike官网图片得到base64链接，如何获取真实png链接

问题原因 #

你拿到的base64内容是网站的懒加载占位图，现在多数电商网站都会用懒加载优化页面加载速度：初始渲染时img标签的src属性只会放一个1像素的透明GIF占位图，真实的图片链接会存储在data-src这类自定义属性里，当图片滑动到可视区域附近时，前端JS才会把自定义属性里的真实链接替换到src属性上完成加载。你用浏览器审查元素看到的是JS替换后的最终DOM结构，而requests请求拿到的是未执行JS的原始HTML源码，所以只能拿到占位的base64链接。

调整方案 #

你不需要修改核心逻辑，只要把取src的逻辑改成取对应存储真实链接的自定义属性即可，调整后的代码如下：

from bs4 import BeautifulSoup
import requests

# 加上请求头伪装浏览器，避免被反爬拦截
headers = {
    "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36"
}

source = requests.get('https://www.nike.com/fr/w/hommes-chaussures-nik1zy7ok', headers=headers).text
soup = BeautifulSoup(source, 'lxml')
pair = soup.find('div', class_='product-card__body')
# 替换src为data-src即可拿到真实png链接
image_scr = pair.find('img', class_='css-1fxh5tw product-card__hero-image')['data-src']
print(image_scr)

注意事项 #

• 如果后续爬取其他站点遇到同样问题，可以先打印原始HTML里对应img标签的所有属性，找到存储真实链接的属性名即可，常见属性名有data-src、data-original、data-url等。
• 加请求头是为了避免网站直接拦截你的爬虫请求，返回异常页面导致找不到对应元素。

内容的提问来源于stack exchange，提问作者William Gode