Failed to get image meta #838
Unanswered
hrishikesh-k
asked this question in
Q&A
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Hello!
I'm trying to create a custom image component to use with
vanilla-lazyload
. I previously had my site with Hugo, which I'm trying to migrate to Nuxt. In my Hugo site, I had an image component that worked like the following:It accepted an image (src) and the longest side (size) as props. If the provided image's longest side is greater than the size prop, I want to resize the longest side to the value of the size prop. For example, if an image has 1500 px width and 1200 px height, and the size prop is 720 px, I wish to resize the image to 720 px width and a proportionate height. For each image, I also want to generate a 64 px (longest) placeholder.
At first, I did not know hot to get the original image's dimensions, but later I found that there's a
useImage().getMeta()
function that provides this. However, that function is asynchronous, which adds some difficulties. I had to useuseAsyncData
to prevent component from loading before this was the image was resolved, but I keep getting:Interestingly though, if I make a small change in the component and the HMR does it works, then in the browser console, I can see the
high
image also work fine. It appears as if the image has loaded by then, but not in the first attempt. What am I missing?Here's my reproduction: https://stackblitz.com/edit/hk-nuxt-image
Beta Was this translation helpful? Give feedback.
All reactions