### 解决方案概述
当 `
img` 标签的 `
src` 属性使用 Blob URL 时，
图片无法正常
显示的原因可能是多方面的。以下是几种常见原因及其对应的解决方案：
---
#### 1
. **Blob URL 生命周期管理**
如果未正确释放 Blob URL，则可能导致其失效或
不可访问。需要确保在
不再需要该 Blob URL 时调用 `window
.URL
.revokeObjectURL()` 方法。
```
javascript
let blobUrl;
fetch(&#
39;image
-url&#
39;)
.then(response => response
.blob())
.then(blob => {
blobUrl = window
.URL
.createObjectURL(blob);
document
.getElementById(&#
39;myImage&#
39;)
.src = blobUrl;
})
.catch(error => console
.error(&#
39;Error:&#
39;, error));
// 当组件销毁或
不需要时撤销对象 URL
function cleanup() {
if (blobUrl) {
window
.URL
.revokeObjectURL(blobUrl);
}
}
```
上述代码通过创建和清理 Blob URL 来避免生命周期问题[^5]。
---
#### 2
. **跨平台兼容性**
iOS 设备可能存在对特定格式 Blob URL 的解析问题。可以通过调整 MIME 类型或直接返回 Base64 编码字符串的方式解决问题。
- **MIME 类型校验**
确保生成 Blob 对象时指定正确的 MIME 类型（如 `&#
39;image/png&#
39;` 或 `&#
39;image/jpeg&#
39;`）。例如：
```
javascript
const blob = new Blob([arrayBuffer], { type: &#
39;image/png&#
39; });
const url = window
.URL
.createObjectURL(blob);
document
.querySelector(&#
39;
img&#
39;)
.src = url;
```
- **Base64 替代方案**
若发现某些设备
不支持 Blob URL，可尝试将二进制数据转换为 Base64 字符串并
赋值给 `
src` 属性。
```
javascript
function arrayBufferToBase64(buffer) {
let binary = &#
39;&#
39;;
const bytes = new Uint8Array(buffer);
for (let i = 0; i < bytes
.byteLength; i++) {
binary += String
.fromCharCode(bytes[i]);
}
return btoa(binary);
}
fetch(&#
39;image
-url&#
39;)
.then(res => res
.arrayBuffer())
.then(buffer => {
const base64Str = `data:image/png;base64,${arrayBufferToBase64(buffer)}`;
document
.querySelector(&#
39;
img&#
39;)
.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: &#
39;&#
39;
};
},
mounted() {
this
.loadImage();
},
methods: {
loadImage() {
fetch(&#
39;/api/image&#
39;)
.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
不显示的问题。实际开发过程中可根据实际情况灵活选用合适的方法组合实施优化改进。
---
超级会员免费看
订阅专栏 解锁全文
扫一扫
1996
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
