如何将背景随机换图的网页链接用作Image元素（替代iframe）

你的需求没法用纯前端HTML/JS实现，因为<img>标签请求的是图片资源文件，而你当前的网页返回的是HTML文档，浏览器会把它当成网页解析，没法直接作为图片展示。要实现类似目标站点的效果，需要用后端语言处理请求，直接返回随机图片的二进制数据。

方案一：用PHP实现 #

1. 把你的图片（image1.png到image5.png）放在服务器的images目录下
2. 创建random-image.php文件，写入以下代码：

<?php
$imgNum = rand(1, 5);
$imgPath = "images/image{$imgNum}.png";

if (file_exists($imgPath)) {
    header('Content-Type: image/png');
    readfile($imgPath);
} else {
    header("HTTP/1.0 404 Not Found");
}
?>

3. 其他人只需在自己的网页里用 <img src="你的服务器地址/random-image.php" alt="随机图片"> 就能调用随机图片。

方案二：用Node.js（Express框架）实现 #

1. 先初始化项目并安装依赖：

npm init -y && npm install express

2. 创建server.js文件，写入以下代码：

const express = require('express');
const fs = require('fs');
const path = require('path');
const app = express();

app.get('/random-image', (req, res) => {
    const imgNum = Math.floor(Math.random() * 5) + 1;
    const imgPath = path.join(__dirname, 'images', `image${imgNum}.png`);
    
    fs.access(imgPath, fs.constants.F_OK, (err) => {
        if (err) {
            return res.status(404).send('图片不存在');
        }
        res.setHeader('Content-Type', 'image/png');
        fs.createReadStream(imgPath).pipe(res);
    });
});

app.listen(3000, () => {
    console.log('服务器运行在http://localhost:3000');
});

3. 启动服务器：node server.js，其他人用 <img src="你的服务器地址:3000/random-image" alt="随机图片"> 即可调用。

补充说明 #

你原来的前端代码是在HTML页面加载后通过JS修改背景样式，这种方式生成的是一个网页，而非图片资源，所以无法被<img>标签直接识别。只有让请求的URL直接返回图片的二进制数据，才能实现你的需求。

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