如何从资产文件夹访问图像到 javascript 对象答案

【问题标题】：How to access image from assets folder to javascript object如何从资产文件夹访问图像到 javascript 对象
【发布时间】：2018-03-13 01:58:35
【问题描述】：

大家好，我在 Angular 项目 中上传图片时遇到的情况，如果用户没有选择图片，那么我想 从 assets 文件夹中读取图片并将其发送到后端。经过数小时的反复试验。我无法将资产文件夹中的图像读取到 JavaScript 文件对象。如果有人知道请指导我。提前致谢。

我尝试过的事情

我尝试在 Angular 中使用 HttpClient 通过传递相对路径来获取它。
我尝试通过将相对路径传递给 File(url) 来创建文件对象；没有运气的构造函数。

请帮帮我。

我的问题是通过访问 angular(4/5) 项目中资产文件夹中的图像来创建文件对象。

【问题讨论】：

你可以谷歌“Ajax 文件上传”并应用它。
@Martijn 你能建议如何以角度访问资产文件夹中的文件到组件或服务吗？

标签： javascript angular typescript

【解决方案1】：

最后我得到了答案，它不受任何 JavaScript 框架的影响。

var blob = null;
var xhr = new XMLHttpRequest(); 
xhr.open("GET", './assets/<FILENAME>'); 
xhr.responseType = "blob";//force the HTTP response, response-type header to be blob
xhr.onload = function() 
{
    blob = xhr.response;//xhr.response is now a blob object
    var file = new File([blob], 'logo.png', {type: 'image/png', lastModified: Date.now()});
    console.log(file);   
}
xhr.send()
}

【讨论】：

【解决方案2】：

要从 javascript 访问您的资产，您需要使用 DomSanitizer 将您的资源标记为受信任：

constructor(sanitizer: DomSanitizer) {
   const sanitizedUrl = sanitizer.bypassSecurityTrustResourceUrl('/assets/<YOUR_IMAGE>');
}

来自Angular Security 为什么：

为了系统地阻止 XSS 错误，Angular 默认将所有值视为不受信任。当一个值通过属性、属性、样式、类绑定或插值从模板插入到 DOM 中时，Angular 会清理和转义不受信任的值。

How to by pass when trusted.

【讨论】：

你能解释一下它是如何工作的吗？
好的，我知道了，但是我怎么能用这个净化的 url 创建文件对象？