### 解决方案概述
当 `
img`
标签的 `src` 属性
使用 Blob URL 时，
图片无法正常显示的原因可能是多方面的。以下是几种常见原因及其对应的解决方案：
---
#### 1. **Blob URL 生命周期管理**
如果未正确释放 Blob URL，则可能导致其失效或
不可访问。需要确保在
不再需要该 Blob URL 时调用 `window.URL.revokeObjectURL()` 方法。
```
javascript
let blobUrl;
fetch('image-url')
.then(response => response.blob())
.then(blob => {
blobUrl = window.URL.createObjectURL(blob);
document.getElementById('myImage').src = blobUrl;
})
.catch(error => console.error('Error:', error));
// 当组件销毁或
不需要时撤销对象 URL
function cleanup() {
if (blobUrl) {
window.URL.revokeObjectURL(blobUrl);
}
}
```
上述代码通过创建和清理 Blob URL 来避免生命周期
问题[^5]。
---
#### 2. **跨平台兼容性**
iOS 设备可能存在对特定格式 Blob URL 的解析
问题。可以通过调整 MIME 类型或直接返回 Base64 编码字符串的方式解决
问题。
- **MIME 类型校验**
确保生成 Blob 对象时指定正确的 MIME 类型（如 `'image/png'` 或 `'image/jpeg'`）。例如：
```
javascript
const blob = new Blob([arrayBuffer], { type: 'image/png' });
const url = window.URL.createObjectURL(blob);
document.querySelector('
img').src = url;
```
- **Base64 替代方案**
若发现某些设备
不支持 Blob URL，可尝试将二进制数据转换为 Base64 字符串并赋值给 `src` 属性。
```
javascript
function arrayBufferToBase64(buffer) {
let binary = '';
const bytes = new Uint8Array(buffer);
for (let i = 0; i < bytes.byteLength; i++) {
binary += String.fromCharCode(bytes[i]);
}
return btoa(binary);
}
fetch('image-url')
.then(res => res.arrayBuffer())
.then(buffer => {
const base64Str = `data:image/png;base64,${arrayBufferToBase64(buffer)}`;
document.querySelector('
img').src = base64Str;
});
```
此方法特别适合于小型图像文件，但对于大尺寸
图片可能会占用更多内存。
---
#### 3. **Meta Referrer 配置**
在部分情况下，服务器端的安全设置会阻止
前端加载外部资源。可以在
HTML 文件头部加入如下元
标签以禁用 referer 发送行为：
```
html
<meta name="referrer" content="never">
```
这一配置有助于防止因 Referer 导致的权限拒绝
问题[^1]。
---
#### 4. **Vue.js 中动态绑定 Src**
如果是在 Vue.js 项目中遇到此
问题，需注意模板语法以及响应式更新逻辑。例如，在绑定 `src` 值前应先验证数据
有效性。
```vue
<template>
<div>
<
img :src="imageUrl" alt="Dynamic Image"/>
</div>
</template>
<script>
export default {
data() {
return {
imageUrl: ''
};
},
mounted() {
this.loadImage();
},
methods: {
loadImage() {
fetch('/api/image')
.then(res => res.blob())
.then(blob => {
this.imageUrl = URL.createObjectURL(blob);
});
}
}
};
</script>
```
参考上述示例可以
有效规避未知
路径 (`unknown`) 错误[^3]。
---
#### 5. **Spring Boot 后端处理 BLOB 数据**
如果是从 Spring Boot 应用程序获取 BLOB 数据并通过 API 提供给
前端展示，则需要注意序列化过程中的编码方式。建议采用流式传输而非直接暴露字节数组字段。
```java
@GetMapping("/getImage/{id}")
public ResponseEntity<byte[]> getImage(@PathVariable Long id) throws IOException {
MyEntity entity = repository.findById(id).orElseThrow(() -> new RuntimeException("Not found"));
HttpHeaders headers = new HttpHeaders();
headers.setContentType(MediaType.IMAGE_PNG); // 设置媒体类型
return new ResponseEntity<>(entity.get
Img(), headers, HttpStatus.OK);
}
```
结合
前端 Fetch 请求即可完成无缝衔接[^2]。
---
### 总结
综上所述，针对
不同场景下的具体需求提供了多种可行的技术手段来应对 `
img`
标签 `src`
使用 Blob URL
不显示的
问题。实际开发过程中可根据实际情况灵活选用合适的方法组合实施优化改进。
---
在学习HTML和CSS时，遇到图片无法显示的问题。首先尝试使用绝对路径，但发现浏览器无法正确读取。之后改为相对路径，先尝试不加'.'，浏览器显示图片加载中。最后在路径前添加'.'，图片成功显示。总结经验：浏览器可能将本地文件视为服务器，适合使用相对路径，且注意路径中的目录分隔符。.
后来经过问别人，别人建议把“\”换成“/”，更改后仍然无法正常显示；经检查，图片路径并无错误。
扫一扫
2056
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
