去除angular中blob图片显示报unsafe的错误提示

原创于 2023-10-07 16:53:17 发布 · 393 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angular.js #javascript #前端

❤️❤️--angular 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了在Angular项目中，如何解决浏览器将Blob图片地址识别为unsafe导致图片无法加载的问题，方法是引入DomSanitizer并使用`bypassSecurityTrustUrl`函数对URL进行安全处理。

由于在angular项目中，浏览器在显示blob图片的时候，自动识别该地址为unsafe，导致图片加载不出来。解决方式如下：

在ts文件中添加以下代码

import {DomSanitizer} from '@angular/platform-browser';
...
constructor(private sanitizer:DomSanitizer){}
...
sanitize(url:string){
    return this.sanitizer.bypassSecurityTrustUrl(url);
}

使用：

 <img style="width: 100%;height:100%" [attr.src]="sanitize(item.url)" alt="">

效果：

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

suoh's Blog

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

Angular.js去除页面中显示的空行方法示例

10-20

在Angular.js中，过滤器是用于格式化显示给用户的值的函数。过滤器可以用于各种场景，如货币格式化、日期处理、排序、字符串处理等。过滤器的工作方式是在表达式后添加一个管道符（|）和过滤器名称来将过滤器应用于...

Angular2+如何去除url中的#号详解

11-30

本文中主要介绍了关于Angular2+中去除url中#号的相关内容，这是最近在工作中遇到的一个问题，觉着有必要给大家分享下，下面话不多说了，来一起看看详细的介绍吧。 1. 为什么要去除？ Angular官方指出：如果没有足够...

参与评论您还未登录，请先登录后发表或查看评论

angular unsafe问题求解

peizhien的博客

04-24

1197

Angularjs中 img 标签中src属性值是{{module.url}} 接收的是后端返回的base64数据需要在页面显示这个图片报错如下： console报错： ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190424163921539.PNG console报错： network报错：我的html代码请问这怎么解决？网上有好多方案都...

issue-Angular允许显示base64或blob格式文件

刘瓜皮Alison的博客

12-18

755

Angular允许img、vedio、audio等资源通过base64、blob等格式加载

EXCEPTION: Error: unsafe value used in a resource URL context

张姐姐聊编程

08-05

6662

在做项目的时候，遇到了一个错误， a标签引入的外部url的资料链接不安全。

angular 使用blob 产生 url动态给ng-href赋值时候出现unsafe 解决方案

weixin_30940783的博客

05-14

266

angular 默认情况下的安全协议是 https?|ftp|mailto| 当我们使用blob 对象去产生url时，需要设定blob为安全协议 var app = angular.module( 'myApp', [] ).config( [ '$compileProvider', function( $compileProvider ) ...

angular.js unsafe 解决方案

m0_37899388的博客

03-05

797

内网访问没有出问题，用了花生壳外网穿透后，每次访问请求之前会携带unsafe: ,导致请求出错，最普遍的解决方案： angular.module('app').config( [ '$compileProvider', function( $compileProvider ) { $compileProvider.aHrefSanitizati...

angular4 获取wifi列表中文显示乱码问题的解决

10-17

首先，当我们在Angular4应用中获取wifi列表，其中包含中文名称时，可能会出现乱码情况，显示为类似（ç”¿ªç”Ÿèè¿ª）的特殊字符。出现这种问题的原因通常是因为编码方式不一致所导致的。在处理这类问题时，...

基于Angular 4和Java的MySQL Blob转JSON数据可视化工具设计源码

10-01

本项目针对这一需求，采用当前流行的前端框架Angular 4和后端语言Java，搭建了一个从MySQL数据库中提取Blob数据，进行格式转换，并最终实现数据可视化的完整流程工具。Angular 4提供了强大的数据绑定和模板功能，...

angularJs中的unsafe:

Excaliburace的博客

12-16

3645

angularJs中的unsafe:在页面中给一些按钮设置了锚点, 但是锚点是根据一些数据让angular计算出来的, 举例说明:<a ng-href="getlocation('xxxx')"></a>能够计算出来的, 就得出类似”#abc”这样的结果, 计算不出来的, 返回的结果是:”javascript:void(0);”, 然后angular计算完后的结果就是:<a ng-href="uns

angular动态绑定iframe的src报错unsafe value used in a resource URL context

zwbHUST的博客

05-26

819

angular项目中要以变量的形式，外部引入src,结果报错如下： <iframe name="myiframe" id="iframe1" [src]="srcUrl" width="100%" height="700px" ></iframe> 解决方式： 1.导入DomSanitizer import { DomSanitizer} from '@angular/platform-browser'; 2.引用DomSanitizer，并转换url srcUrl:a

angularjs unsafe ng-href using javascript: ;

SakuraLLj的专栏

12-09

2587

原因:用angular动态修改a标签的href为” javascript: ;”时,但a标签的href实际为” unsafe:javascript: ;”. 解决办法:<!DOCTYPE html> <html xmlns:ng="http://angularjs.org"> <head> <script data-require="angular.js@1.2.0-rc2" data-

angular2+ 图片 src 用base64编码时，会自动加上‘unsafe:’这个开头，解决方法

dearbaba_11的博客

10-05

414

angular2+ 图片 src 用base64编码时，会自动加上‘unsafe:’这个开头，解决方法

在Angular中设置iframe src时报错unsafe value used in a resource URL context解决方法

我的米饭

12-20

2991

转载自：https://blog.csdn.net/Neokekeke/article/details/78738906 网上找了很多资料：才发现是Ionic2和TypeScript中对外部url资源链接做了安全限制 1.在需要使用外部url链接的ts文件中，引入DomSanitizer类 import { DomSanitizer } from '@angular/platform-browse...

angular 动态设置blob链接给 ng-href时遇到unsafe 解决方案

weixin_33995481的博客

05-14

703

2019独角兽企业重金招聘Python工程师标准>>> ...

angular/ionic中对img、iframe等的src进行动态绑定变量的问题解决

qq_39657114的博客

11-09

4594

例如以下代码：对应的html页面中是这样：<iframe class=“filling” [src] = “iframe”> 在这里直接对src进行动态绑定变量就会出现：unsafe value used in a resource URL context (see http://g.co/ng/security#xss)问题。查看官方文档会发现angular在这方面做了关于防止x...

angular 去掉href的unsafe

chenchuwai的博客

09-02

592

使用angular，herf莫名其妙多了unsafe导致不能够跳转解决方法： ts文件中添加以下代码： import {DomSanitizer} from '@angular/platform-browser'; ... constructor(private sanitizer:DomSanitizer){} ... sanitize(url:string){ return this.sanitizer.bypassSecurityTrustUrl(url); } html &l

【AngularJS】Angularjs中图片等链接 unsafe的问题解决方法

Mickeymouse

03-16

2907

angular对href是有安全检查的，只能生成它认为安全的链接，所以在我们加载绑定base64的图片或者一些tel,sml链接的时候，会报出类似下面的错误解决办法很简单，AngularJS内置的provider——$compileProvider$compileProvider.aHrefSanitizationWhitelist([regexp])可以设置urls安全列表的正则表达式，就不会报...

Angular中请求blob数据以及显示blob失败并提示 sanitizing unsafe URL value blob的解决办法

喻志强的博客

07-19

5603

Angular中请求blob数据的请求 Angular中的网络请求非常简单，我们导入HttpClientModule后，在类构造函数中注入 HttpClient 后就可以使用其提供好的相关请求方法了，这里不再赘述了 constructor( private _httpClient: HttpClient, ) { } 我们先来看一下 HttpClient 这个类的相关注释。 HttpClient 是一个可注入的类，带有执行HTTP请求的方法。

Angular中如何將file類型改爲blob

最新发布

02-26

<think>嗯，我现在需要在Angular中将一个文件类型转换为Blob。我应该怎么做呢？首先，我记得在JavaScript中处理文件的时候，可能会用到File对象或者Blob对象。Angular本身是基于TypeScript的，所以可能需要使用一些特定的方法或者API。用户的问题是要把File类型转为Blob，可能需要了解File和Blob之间的关系。File对象实际上是继承自Blob的，所以也许可以直接使用File对象本身，因为它已经具有Blob的功能。但可能用户需要显式地转换，或者需要将File对象转换成Blob以便进行某些操作，比如上传或者处理。首先，我需要确认在Angular中如何处理文件输入。通常，用户会通过<input type="file">来选择文件，然后通过事件获取File对象。例如，当用户选择文件后，可以通过event.target.files获取FileList，然后取第一个文件就是File对象。假设已经有一个File对象，如何将其转换为Blob？因为File是Blob的子类，所以其实可以直接使用File对象作为Blob来使用。例如，使用FileReader读取文件内容，或者使用FormData上传文件时，可以直接添加File对象。不过，如果用户确实需要创建一个新的Blob对象，可能需要使用File的slice方法或者将File的内容读取为ArrayBuffer，然后再创建Blob。不过这样可能没有必要，因为File本身就可以作为Blob使用。另一种情况是，用户可能希望从其他数据源创建Blob，例如通过HTTP请求获取的数据。这时候可能需要使用Blob构造函数，比如new Blob([data], {type: 'application/octet-stream'})。可能用户遇到的问题是，他们在代码中获取到的是File类型，但某个API需要的是Blob类型，这时候是否需要显式转换？其实可能不需要，因为File就是Blob，可以直接传递。例如，使用XMLHttpRequest或者Fetch API上传文件时，可以直接将File对象放入FormData中，不需要转换。但是，如果用户需要处理File的内容并生成一个新的Blob，可能需要使用FileReader读取文件内容，然后将结果转换为Blob。比如： const file = event.target.files[0]; const reader = new FileReader(); reader.onload = function() { const blob = new Blob([reader.result], {type: file.type}); // 使用blob }; reader.readAsArrayBuffer(file); 不过这样做可能没有必要，因为可以直接使用file.slice()来获取Blob的某部分，或者直接使用File对象。总结一下，可能的步骤是： 1. 通过input元素获取File对象。 2. 因为File继承自Blob，所以可以直接当作Blob使用。 3. 如果需要复制或处理内容，可以使用FileReader读取后创建新的Blob，或者使用slice方法。或者用户可能需要将File转换为Blob的另一种形式，例如通过读取文件内容为Blob。这时候可能需要使用FileReader，但需要注意异步操作的处理。另外，在Angular中处理文件时，可能需要使用到RxJS的Observable，例如将FileReader的读取过程封装为Observable，方便在Angular的服务或组件中处理。例如，创建一个读取文件为Blob的函数： readFileAsBlob(file: File): Observable<Blob> { return new Observable(observer => { const reader = new FileReader(); reader.onload = () => { const blob = new Blob([reader.result], { type: file.type }); observer.next(blob); observer.complete(); }; reader.onerror = (error) => observer.error(error); reader.readAsArrayBuffer(file); }); } 不过，这种情况下，是否需要这样做呢？因为File本身就是Blob，直接返回file可能就足够了。但或许在某些情况下需要将文件内容转换为其他格式的Blob，或者修改类型。可能用户存在误解，认为需要显式转换，但实际上不需要。因此，正确的回答应该是解释File和Blob的关系，说明File可以直接作为Blob使用，并提供示例代码。比如，在Angular组件中处理文件上传： onFileSelected(event: any) { const file: File = event.target.files[0]; if (file) { // 直接使用file作为Blob const blob: Blob = file; // 或者使用slice方法截取部分内容 const blobPart = file.slice(0, 1024, file.type); // 上传或处理blob } } 因此，答案的核心是：File对象已经是Blob，无需转换，可以直接使用。如果有特殊需求，如截取部分内容，则使用slice方法。</think>在 Angular 中，将 `File` 类型转换为 `Blob` 实际上非常简单，因为 **`File` 对象本身继承自 `Blob`**。这意味着你可以直接使用 `File` 对象，就像它是 `Blob` 一样，无需显式转换。以下是详细说明和示例： --- ### 直接使用 `File` 作为 `Blob` 当用户通过 `<input type="file">` 选择文件时，你可以直接从事件中获取 `File` 对象，并直接将其当作 `Blob` 使用： ```typescript onFileSelected(event: Event) { const input = event.target as HTMLInputElement; if (input.files && input.files[0]) { const file: File = input.files[0]; const blob: Blob = file; // File 继承自 Blob，直接赋值即可 // 使用 Blob 的 API（例如上传） const formData = new FormData(); formData.append('file', blob, file.name); // 示例：通过 HTTP 上传 this.http.post('your-api-url', formData).subscribe(); } } ``` --- ### 如果需要截取部分内容如果你想操作 `File` 的某一部分（如切片），可以使用 `slice()` 方法生成新的 `Blob`： ```typescript const blobPart: Blob = file.slice(0, 1024); // 截取前 1024 字节 ``` --- ### 通过 `FileReader` 读取内容（特殊场景）如果某些 API 强制要求通过 `Blob` 构造函数创建（极少数情况），可以通过 `FileReader` 读取文件内容后构建： ```typescript readFileAsBlob(file: File): Promise<Blob> { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = () => { const blob = new Blob([reader.result!], { type: file.type }); resolve(blob); }; reader.onerror = () => reject(reader.error); reader.readAsArrayBuffer(file); }); } // 使用示例 async onFileSelected(event: Event) { const file = (event.target as HTMLInputElement).files?.[0]; if (file) { const blob = await this.readFileAsBlob(file); // 使用 blob } } ``` --- ### 关键点总结 1. **无需显式转换**：`File` 是 `Blob` 的子类，可以直接传递给接受 `Blob` 参数的 API。 2. **操作切片**：使用 `file.slice()` 生成新的 `Blob` 片段。 3. **特殊场景**：仅当需要完全控制数据时，才需通过 `FileReader` 读取并构建新 `Blob`。通过这种方式，你可以高效地在 Angular 中处理文件与二进制数据。