这次给大家带来angular图片上传预览路径问题的解决，解决angular图片上传预览路径问题的注意事项有哪些，下面就是实战案例，一起来看一下。
前言
前一段时间做项目时，遇到一个问题就是angularjs实现图片预览和上传的功能，在angular4中，通过input:file上传选择图片本地预览的时候，通过window.url.createobjecturl获取的url赋值给image的src出现错误：
warning: sanitizing unsafe url value
下面介绍一下解决方法：
html代码：
<input type="file" (change)="filechange($event)" > <img [src]="imgurl" alt="">
其中，change方法会在每次选择图片后调用，image的src必须通过属性绑定的形式，使用插值表达式同样会出错
ts代码
import { component, oninit } from '@angular/core'; import { domsanitizer } from '@angular/platform-browser'  @component({  selector: 'my-app',  templateurl: './app.component.html',  styleurls: ['./app.component.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，此时就没有问题了~
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
angularjs实现计算价格功能
webpack如何构建electron应用
以上就是angular图片上传预览路径问题的解决的详细内容。