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

Question

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

我尝试过的事情

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

请帮我。

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

Answer 1

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

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

来自Angular Security为什么：

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

信任时如何通过。

Answer 2

最终，我得到了不管任何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()
}

有关更多详细信息： -http : //qnimate.com/javascript-create-file-object-from-url/