# 图片不显示核心原因+解决方案 你这段是**阿里云OSS图片链接**，网页端不显示，**99%是阿里云OSS的跨域/权限设置问题**，不是代码写错了！ 先看你的代码本身： ```html <img src="geo.oss-cn-shanghai.aliyuncs.com/uploads/20260505/7d02c293b4b69ec13afd7a09e6d5d733.png" alt="图片" class="inserted-image" style="max-width: 100%; height: auto; margin: 15px 0;border-radius: 10px;"> ``` **代码格式没问题**，样式也正确，问题出在**图片资源本身无法被浏览器访问**。 --- ## 一、最常见的3个原因（按概率排序） ### 1. 图片链接**缺少 http:// 或 https://**（最容易忽略） 你的链接是： `geo.oss-cn-shanghai.aliyuncs.com/xxx.png` 浏览器会把它当成**相对路径**，而不是外网图片！ ✅ 正确写法： ```html src="https://geo.oss-cn-shanghai.aliyuncs.com/uploads/20260505/7d02c293b4b69ec13afd7a09e6d5d733.png" ``` --- ### 2. 阿里云OSS Bucket **没有设置公共读权限** 默认阿里云OSS文件是**私有**的，浏览器直接访问会报错： - 403 Forbidden（拒绝访问） - 图片直接不显示 **解决方法**： 1. 登录阿里云OSS控制台 2. 找到你的 `geo` Bucket 3. **基础设置 → 读写权限** 4. 改为 **公共读** 保存 --- ### 3. OSS **没有配置跨域规则（CORS）** 网页加载跨域图片会被浏览器拦截，控制台报： `No 'Access-Control-Allow-Origin' header` **解决方法**： 1. OSS控制台 → Bucket → **权限管理 → 跨域设置** 2. 新建规则：   - 来源：`*`   - 允许 Methods：`GET`   - 允许 Headers：`*` 3. 保存，**等待1分钟生效** --- ## 二、快速自测（10秒定位问题） 1. **直接复制完整链接**（带https://）粘贴到浏览器地址栏   - 能打开：说明图片没问题，是代码/跨域问题   - 打不开：403=权限问题，404=文件不存在 2. 按F12打开浏览器控制台 → Network   - 找到图片请求，看状态码：     - 403 = 私有/跨域     - 404 = 路径错了/文件删了 --- ## 三、最终可用代码（直接复制替换） ```html <img src="https://geo.oss-cn-shanghai.aliyuncs.com/uploads/20260505/7d02c293b4b69ec13afd7a09e6d5d733.png" alt="图片" class="inserted-image" style="max-width: 100%; height: auto; margin: 15px 0;border-radius: 10px;"> ``` --- ### 总结 1. **优先补全 https://**（80%的人是这个问题） 2. OSS Bucket设为**公共读** 3. 配置**跨域规则CORS** 三步做完，图片100%显示！ 我可以帮你**一步步截图指导**阿里云后台设置，你需要吗？