如何从Javascript中的responseText在HTML中设置img.src？

我跟踪了答案&文件下载成功。面临的问题是将下载的图像文件设置到

img.src

标记中

图像链接：

代码：

function onReadyState(e){

    let r = e.target;
    if(r.readyState != 4 || r.status != 200){
        return
    }
    console.log(r)
    let img = document.getElementById('downloaded-img')
    let base64  = btoa(r.response)
    img.src = 'data:image/jpg;base64,'+base64
}

我试图将responseText转换为base64，以设置显示下载图像的

img.scr

。但我犯了个错误

未捕获的DomeException:未能在“窗口”上执行“btoa”：窗口 要编码的字符串包含拉丁1范围之外的字符。 在XMLHttpRequest.downloadCompleted上完成

然后我用下面的代码来回答

错误消失了。但是

img

仍然是空白。我如何解决它？先谢谢你

更新： 我用了link。它抛出下面的错误

访问位于的XMLHttpRequest '' 来源“null”已被CORS策略阻止：否 “Access Control Allow Origin”标头出现在请求的服务器上 资源

我也使用了链接，并没有任何错误，但我得到了相同的空白区域，而不是图像

---

btoa

接收字符串作为参数，但您有一个流。您可以使用

URL.createObjectURL

获取blob URL

consturl='1〕https://images.pexels.com/photos/853199/pexels-photo-853199.jpeg?crop=entropy&cs=srgb&dl=aerial-海岸视图-近-大-灰色-岩石-853199。jpg&fit=crop&fm=jpg&h=4000&w=6000’；
const img=document.querySelector（'img'）；
fetch（url）.then（data=>data.blob（））.then（blob=>{
const src=URL.createObjectURL（blob）；
img.src=src；
}).catch（err=>console.log（err））
一个很长的方法是使用
FileReader
，假设您以blob的形式接收数据
所以这应该是可行的（希望如此）：

它是否至少显示未找到图像的图标（类似）？@RHShanks92，抛出错误，表示在'https://cdn.dribbble.com/users/93493/screenshots/1445193/notfound.pngCORS策略已阻止“来自原点”的“null”：请求的资源上不存在“访问控制允许原点”标头。

并且？@RHShanks92，是，第二个标头加载数据。但是同样的空白区域。我用你的链接更新了这个问题。我使用纯JS下载图像文件的概念，并将其设置为img标记。我的回答是：下载时你不需要所有的员工<代码>变量a=document.createElement（'a'）；a、 href='url'；a、 下载='filname.jpg'；文件.正文.附件（a）；a、 单击（）；a、 remove（）很抱歉造成误解，我想显示相应图像下载的进度。这就是为什么我使用了我所附的答案中的代码。只对实际可运行的代码使用堆栈片段-不可运行的代码不应该给人们一个按钮来运行，它只是增加了噪音抱歉，我是新的，我正在学习，感谢您花时间解释。

   let base64  = btoa(unescape(encodeURIComponent(r.responseText)))

xml = new XMLHttpRequest()
xml.open("GET", "YOUR URL", true)
xml.responseType = "blob"
var blob
xml.onload = function(e){blob = xml.response;}
file = new FileReader()
var base64
file.onloadend = function() {base64 = file.result}
file.readAsDataURL(blob)
img = document.getElementById('downloaded-img')
img.src = base64