如何在Django中调用waifu.pics API获取图片，实现页面刷新展示不同图片

DevOps 小满

2026-10-12

解决方案

核心问题说明

你之前的写法不可行的原因是https://api.waifu.pics/sfw/dance返回的是包含图片地址的JSON数据，不是图片本身的二进制资源，无法直接作为img标签的src属性值。你可以选择后端请求API或者前端请求API两种方案实现需求：

方案1：Django后端实现（推荐）

步骤1：安装请求库

执行命令安装Python HTTP请求库：
pip install requests

步骤2：修改首页视图函数

在你的views.py对应的首页视图中添加API请求逻辑，将获取到的图片地址传递给模板：

import requests
from django.shortcuts import render

def index(request):
    # 预设备用图片地址，避免API请求失败时页面裂图
    img_url = "你的默认备用图片地址"
    try:
        # 超时时间设为3秒，避免API响应慢拖垮页面加载
        resp = requests.get("https://api.waifu.pics/sfw/dance", timeout=3)
        if resp.status_code == 200:
            img_url = resp.json()["url"]
    # 捕获所有请求相关异常，保证页面正常加载
    except Exception:
        pass
    return render(request, "你的首页模板路径.html", {"img_url": img_url})

步骤3：修改模板代码

将模板中的img标签src替换为后端传递的变量即可：

<a href="{% url 'index'%}">
    <img src="{{ img_url }}" alt="Homepage IMG">
</a>

方案2：前端JavaScript实现

如果不想修改后端逻辑，可以直接在前端页面发请求获取图片地址：

<a href="{% url 'index'%}">
    <img id="home-img" src="你的默认备用图片地址" alt="Homepage IMG">
</a>

<script>
// 页面加载完成后请求API
window.addEventListener('load', async () => {
    try {
        const resp = await fetch("https://api.waifu.pics/sfw/dance");
        const data = await resp.json();
        document.getElementById("home-img").src = data.url;
    } catch (e) {
        // 请求失败时保留默认图片即可
    }
})
</script>