浏览器在请求外部图片（403 Forbidden）问题

:img-props="{ referrerpolicy: 'no-referrer' }"前端开发中非常实用的一个属性配置，通常用于解决图片防盗链（403 Forbidden）问题。

它的作用是什么？
默认情况下，浏览器在请求外部图片等资源时，会自动在请求头（Header）中带上当前页面的 URL（即 Referer 信息）。很多图片服务器（如豆瓣、微信公众号等）会校验这个 Referer，如果发现请求不是来自它们自己的网站，就会拒绝访问并返回 403 错误。
将 referrerpolicy 设置为 no-referrer 后，浏览器在请求该图片时不会携带任何来源信息（Referer 为空）。由于很多防盗链策略允许空 Referer 的请求通过，这样就可以成功加载图片。
代码解析
你提供的 :img-props="{ referrerpolicy: 'no-referrer' }" 是典型的 Vue.js 语法（动态绑定属性）。它通常出现在自定义组件或 UI 框架（如 Element Plus 等）中，意思是：将 referrerpolicy="no-referrer" 这个属性透传给组件内部渲染的标签。
如果是在原生 HTML 中，它的写法是：

html 复制代码

<n-image
  lazy
   :src="candidate.image"
   preview-disabled
   :img-props="{ referrerpolicy: 'no-referrer' }"
   object-fit="contain"
   class="exclusive-processing__candidate-img"
 />

⚠️ 重要避坑提醒
虽然这个方法很有效，但在使用时需要注意以下几点：
仅限部分场景：它只对允许"空 Referer"访问的防盗链有效。如果对方服务器强制要求特定的 Referer，或者还校验了 User-Agent（例如某些微信图片），这个方法依然会失效。
不要全局滥用：不要直接在中使用来全局禁用。这会导致页面中所有的请求（包括微信支付、第三方登录、统计埋点等）都不带 Referer，极易引发严重的业务报错（例如微信 H5 支付会提示"商家存在未配置的参数"）。
替代方案：如果 no-referrer 无效，可以考虑使用后端代理服务器来请求图片，或者使用第三方图床代理服务。

除了 referrerpolicy="no-referrer"，解决图片防盗链（403 Forbidden）问题还有以下几种常见且有效的方案。你可以根据具体的使用场景（前端、后端或运维）来选择：

使用第三方图片代理服务（前端方案）
这是另一种非常轻量级的前端处理方式。你可以借助第三方的图片代理缓存服务，在图片 URL 前加上特定的前缀。
常用服务：images.weserv.nl
使用方法：将原图片 URL 中的 http:// 或 https:// 替换为 https://images.weserv.nl/?url=。
例如：原链接为 https://example.com/1.jpg，转换后为 https://images.weserv.nl/?url=example.com/1.jpg。
⚠️ 注意事项：这种方案在处理 GIF 动图时可能会失效（只显示静态首帧），因此如果是 GIF 图片，仍建议优先使用 no-referrer。