这个问题我碰到过好几次，核心原因是Instagram的CDN启用了防盗链（Hotlinking Protection），具体逻辑是这样的：

• 当你直接在浏览器地址栏打开这个图片URL时，请求头里的Referer字段是空的（或者来自浏览器本身），Instagram服务器会认为这是合法的直接访问，所以返回正常图片。
• 但当你把这个URL放进<img>标签里时，你的页面域名会被作为Referer发送给Instagram服务器，它检测到这个非授权的来源，就会返回一个200状态码，但实际响应内容是空白或者占位资源，导致图片无法渲染。

下面给你几个可行的解决方案：

1. 搭建自己的反向代理（推荐方案） #

最简单的方式是在你的服务器上写一个小代理接口，让前端请求这个接口，再由接口去拉取Instagram的图片并返回给前端。这样<img>标签的请求来源是你自己的服务器，就不会触发防盗链了。

举个Node.js + Express的代理示例：

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

// 代理接口，接收图片URL作为参数
app.get('/proxy-instagram-image', async (req, res) => {
  const targetUrl = req.query.url;
  
  // 安全校验：只允许代理Instagram的图片URL
  if (!targetUrl || !targetUrl.includes('instagram.com')) {
    return res.status(403).send('仅支持代理Instagram图片资源');
  }

  try {
    // 发起请求获取图片，设置响应头和图片内容一致
    const response = await axios.get(targetUrl, { responseType: 'stream' });
    res.setHeader('Content-Type', response.headers['content-type']);
    response.data.pipe(res);
  } catch (error) {
    res.status(500).send('代理请求失败');
  }
});

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

前端使用时，先把Instagram的URL做URL编码，再传给代理接口：

<!-- 先对原URL做encodeURIComponent处理 -->
<img src="http://your-server-domain.com/proxy-instagram-image?url=https%3A%2F%2Fscontent-lga3-2.cdninstagram.com%2Fv%2Ft51.2885-19%2F118728599_236868367676627_1501714039502593397_n.jpg%3Fstp%3Ddst-jpg_s150x150%26amp%3B_nc_ht%3Dscontent-lga3-2.cdninstagram.com%26amp%3B_nc_cat%3D111%26amp%3B_nc_ohc%3D3xkXtM3P--8AX81FGxo%26amp%3Bedm%3DAMKDjl4BAAAA%26amp%3Bccb%3D7-5%26amp%3Boh%3D00_AfC6BQkNCq70zq-OBz0eawyN4pDD8D8kNDiWxfURfs8BYw%26amp%3Boe%3D636126BA%26amp%3B_nc_sid%3D1fe099" alt="Instagram头像">

2. 下载图片到本地服务器（需注意版权） #

如果你有合法的使用权限，可以直接把图片下载到自己的网站服务器，然后用本地路径引用：

<img src="/path/to/your/local/instagram-image.jpg" alt="Instagram头像">

这种方式完全避开了防盗链，但一定要遵守Instagram的服务条款，确保你有权使用该图片。

注意事项 #

• 不要滥用Instagram的资源：防盗链机制是为了防止未经授权的网站消耗他们的带宽，所以使用代理时要做好访问限制，避免给对方服务器造成不必要的压力。
• 遵守版权法规：确保你使用的Instagram图片有合法的使用权限，避免侵权问题。

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