Get src url to use it in an existing img element?

[frederikheld]

Hey :-)

Is it possible to have an url or base64 encoded string returned, that I can use in an existing img element?

Background is that I'm trying to use your library in a VueJS app with Vuetify. Vuetify has the v-img element, which accepts an image url as source (see: https://vuetifyjs.com/en/components/images/). I would like to use the v-img as it comes with several features that the vanilla img element doesn't have.

I tried it like this but it didn't work:

<v-img :src="picture" />

updatePicture (data) {
      loadImage(
        data,
        (image) => {
          this.picture = image.src
        },
        {
          meta: true,
          orientation: true
        })
    }

It shows the following error in the console:

backend.js:1666 GET blob:http://localhost:8080/70644769-efa1-4af4-9dbe-2310738f0b1f net::ERR_FILE_NOT_FOUND

The same blob url works fine if it's part of the img element that is inserted if I do document.body.appendChild(image) like it's shown in the docs.

How can I do this right?

Thanks in advance Fred

[frederikheld]

Heureka! I found this older comment from you that solved it \o/

https://github.com/blueimp/JavaScript-Load-Image/issues/114#issuecomment-631253837

updatePicture (data) {
      console.log(data)
      loadImage(
        data,
        (image) => {
          this.picture = image.toDataURL()
        },
        {
          meta: true,
          orientation: true,
          canvas: true
        })
    }

Thanks! I'm gonna close this issue now

[blueimp]

Thanks for posting your solution! ☺️