The interface returns an image file instead of url. How does the front end display it?

how is a picture displayed in img when a request is returned from the backend interface?

To view in

preview is to display a picture

console.log(img):

.]

blob createObjectURLimg

Code

 this._http.doGet(this, "createQRCode", {id: this.lessonId}, (res) => {
        var img = document.createElement("img")
        const myBlob = new window.Blob([res.data], {type: "image/jpeg"})
        console.log(myBlob)
        const qrUrl = window.URL.createObjectURL(myBlob)
        img.src = qrUrl
        img.onload = function () {
          window.URL.revokeObjectURL(qrUrl)
        }
        const imgDiv = document.querySelector(".qr-div")
        imgDiv.appendChild(img)
      })

first you need to set up axios responseType: "blob"
and then you can createObjectURL directly

    const qrUrl = window.URL.createObjectURL(res.data)
    var img = document.createElement("img")
    img.src = qrUrl
    img.onload = function () {
      window.URL.revokeObjectURL(qrUrl)
    }
    const imgDiv = document.querySelector(".qr-div")
    imgDiv.appendChild(img)

Blob img front-end

Oct.25,2021

if it is a resource link, use the img tag
directly. If the data is in blob format, you can use URL.createObjectURL () to create a temporary url , and then use the img tag. Don't forget URL.revokeObjectURL ()

after use.

if you don't want to use the img tag, you can also use drawImage () of canvas or getImageData () to render the picture, and you can also achieve the effect of preview

the uri that can also be directly accessed is written to the img tag, and a request of type get is automatically sent out. If the returned resource is in the format of an image, it can also be displayed

axios.get(url, { params, `responseType: 'arraybuffer'`}).then(({ data }) => {
    let u8a = new Uint8Array(data).reduce((data, byte) => data + String.fromCharCode(byte), '');
    let src = `data:image/png;base64, ${ btoa(u8a) }`;
    console.log(src);
});

2:
if your interface document indicates that the response type is: IMAGE, then you can directly send it to the src of img as an image path

<img src="" />

I also encountered the same problem. Can I get the picture url by setting responseType: 'blob', directly const myBlob = new window.Blob ([res.data], {type:' image/jpeg'})?

Previous: Python PIL library, I write on a fixed-size picture, how to achieve text more than the end of the automatic line wrapping?

Next: Related to vue element.