Get image width and height working 50% of the time in vue js

Question

. 。 Answers to this question are eligible for a +50 reputation bounty. Lara M. wants to to this question. 这个问题。

I have this structure in a view file, in Vue js:

<template>
    <div class="myImageData">
       {{ imageCrop(whateverImageUrl) }}
    </div>
<template>

<script>
 export default {
     methods: {
         imageCrop: function(iiif) { 
           let image = new Image();
           image.src = iiif; 
           let width =  image.width; 
           let height = image.height;
           return image.src + " this is width " + width + " and this is height " + height
         }
     }
}

Sometimes I get the right height and width, but sometimes I get 0 and 0. Are there some caching problems? Is methods the right way to do this? I am new to Vue, so I don't understand very well how it works.

EDIT: If I use

 image.onload = () => {
       let height = image.height;
       let width = image.width;
       return image.src + " this is width " + width + " and this is height " + height
 }

Nothing appear on the page. I tried to put an error handling like that:

nameError: function(){
        try {
            const error = new Error();
            return error.message;
        } catch (ex) {
            return ex.message;
        }

and it generates an event with this in the DOM:

const invoker = (e) => { // async edge case #6566: inner click event triggers patch, event handler // attached to outer element during patch, and triggered again. This // happens because browsers fire microtask ticks between event propagation. // the solution is simple: we save the timestamp when a handler is attached, // and the handler would only fire if the event passed to it was fired // AFTER it was attached. const timeStamp = e.timeStamp || _getNow(); if (skipTimestampCheck || timeStamp >= invoker.attached - 1) { callWithAsyncErrorHandling(patchStopImmediatePropagation(e, invoker.value), instance, 5 /* NATIVE_EVENT_HANDLER */, [e]); }

Answer 1

You may want to wait untill your image is fully loaded

let img = new Image();
image.src = iiif;
let text = "";
img.onload = () => {
  let width =  image.width; 
  let height = image.height;
  text image.src + " this is width " + width + " and this is height " + height
}
return text;

You may need to make this function async await to not instantly return an empty string

Answer 2

As pointed in the comments by @theshark, creating an image to retrieve its dimensions is an asynchronous process. AFAIK, you won't be able to use the result of such method in the rendering.

It's unclear what is it you're trying to achieve, but the easiest way would be to store the dimensions in your component's data once your imageCrop method got them. This method won't have to be called in the template, but rather in a created hook.

You can directly bind you component's data in your template:

<template>
    <div class="myImageData">
       {{ src }} this is width {{ width }} and this is height {{ height }}
    </div>
</template>

<script>
 export default {
    data() {
      return {
        src: "",
        width: 0,
        height: 0
      }
    },
    created() {
      this.imageCrop(whateverImageUrl);
    },
    methods: {
      imageCrop: function(iiif) {
        let image = new Image();
        image.onload = (event) => {
          this.width = event.target.width;
          this.height = event.target.height;
          this.src = event.target.src;
        }
        image.src = iiif; 
      }
    }
}
</script>