web前端|js教程
Angular,路径,预览
web前端-js教程
如何开发淘宝客网站源码,vscode主题编辑,ubuntu广告过滤,tomcat 日志禁用,sqlite启动rtree,网站服务器维护价格,手机显示图片的插件,前端封装的框架,爬虫 csrf,漳州PHP培训,seo优化学习资料,母婴网站源码带数据,网页中选择日期,网页设计留言板模板,页面跳转代码,lzphp在线订单管理系统,同城交友程序lzw
这次给大家带来Angular图片上传预览路径问题的解决，解决Angular图片上传预览路径问题的注意事项有哪些，下面就是实战案例，一起来看一下。
投资理财系统整站源码,vscode 返回快捷键,ubuntu加vlan,tomcat本地访问无法,购买网络爬虫,php.ini gd,衢州关键词seo推广,php公司网站,后台对账模板lzw
前言
h5编辑器源码 下载,Ubuntu开机紫色屏,tomcat 转义字符串,在线文档爬虫,php网页设计字体,seo 和seo营销方法lzw
前一段时间做项目时，遇到一个问题就是AngularJS实现图片预览和上传的功能，在Angular4中，通过input:file上传选择图片本地预览的时候，通过window.URL.createObjectURL获取的url赋值给image的src出现错误：
WARNING: sanitizing unsafe URL value
下面介绍一下解决方法：
html代码：
其中，change方法会在每次选择图片后调用，image的src必须通过属性绑定的形式，使用插值表达式同样会出错
ts代码
import { Component, OnInit } from @angular/core;import { DomSanitizer } from @angular/platform-browser @Component({ selector: my-app, templateUrl: ./ponent.html, styleUrls: [./ponent.css]})export class AppComponent implements OnInit { imgUrl; constructor( private sanitizer: DomSanitizer ){} ngOnInit() { } fileChange(event){ let file = event.target.files[0]; let imgUrl = window.URL.createObjectURL(file); let sanitizerUrl = this.sanitizer.bypassSecurityTrustUrl(imgUrl); this.imgUrl = sanitizerUrl; }}
首先，引入DomSanitizer，然后在构造器里面注入，最重要的就是把window.URL.createObjectURL生成的imgUrl通过santizer的bypassSecurityTrustUrl方法，将它转换成安全路径。
最后将生成的安全的url赋值给imgUrl，此时就没有问题了~
