如何不使用iframe/embed 仅通过img标签加载.html格式广告链接

直接给<img>标签的src属性赋值HTML地址无法正常渲染，核心原因是img标签原生仅支持图片类资源加载，无法解析HTML文档。此前实现过的效果本质是通过服务端将HTML页面预渲染为图片后返回给img标签，并非直接加载HTML地址。

具体实现步骤 #

• 部署服务端渲染中转服务：使用Puppeteer/Playwright这类无头浏览器工具，请求目标广告HTML地址，等待页面资源加载完成后，按广告位尺寸截取静态图，以图片流格式响应请求
• 前端img标签的src指向自有中转服务地址，不要直接填写原始HTML路径
• 给中转接口加缓存策略，避免每次请求都重复渲染页面，降低服务压力

修正后的前端代码 #

<div class="container mb-3">
    <div class="row">           
        <div class="col-12 ads-parent-responsive d-none d-xl-block d-lg-block d-md-none d-sm-none">
            <div class="text-center">
                <img class="d-block w-100 image" 
                     src="/api/ads/render?target=https%3A%2F%2Fs0.2mdn.net%2Fdfp%2F370694%2F5128031207%2F1646966699597%2F970x250%2Findex.html&w=1100&h=200" 
                     style="width: 1100px; height: 200px;"
                     alt="横幅广告">
            </div>
        </div>
    </div>
</div>

注：src里的target参数做了urlencode，避免特殊字符导致参数解析异常；原代码里写的type="image/jpg"是img标签的无效属性，直接删除即可。

中转服务核心逻辑示例（Node.js） #

const express = require('express');
const puppeteer = require('puppeteer');
const app = express();

app.get('/api/ads/render', async (req, res) => {
  const { target, w = 1100, h = 200 } = req.query;
  if (!target) return res.sendStatus(400);

  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();
  await page.setViewport({ width: Number(w), height: Number(h) });
  // 等待页面网络空闲后截图，保证广告素材加载完整
  await page.goto(decodeURIComponent(target), { waitUntil: 'networkidle2' });
  const imgBuf = await page.screenshot({ type: 'jpeg', quality: 85 });
  await browser.close();

  res.setHeader('Content-Type', 'image/jpeg');
  res.setHeader('Cache-Control', 'public, max-age=86400');
  res.end(imgBuf);
});

app.listen(3000);

提示：该方案仅能实现广告静态展示，如果需要保留广告点击、动效等交互能力，不存在纯前端无iframe/embed的实现方案，必须额外开发坐标映射、事件代理等逻辑，实现成本极高，常规场景不推荐使用。

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