v-for image not found 404 using nuxt-image

[nuxt]

v-for image not found 404 using nuxt-image

[farnabaz]

Sorry for the late response. As you know Image module is WIP and the current version does not support assets. You should put your images inside static directory. But in the next release (ASAP) it will support assets too.
I recommend to not use Image module on production or real projects. Wait until official announecment. The alpha release may have BREAKING CAHNGES for good.

[farnabaz]

With <nuxt-image> you dont need to use require image. Nuxt image automatically look for the image. In your case, you should change your code to this

<div v-for="image in product[0].images" v-bind:key="image.rank">
    <nuxt-image :src="`/images/shop/${image.image_570xN}`" />
</div>

[illustratordavid]

Thank you for your reply @farnabaz

Unfortunately the images are still not found. Are the images best placed in the assets folder? I noticed you removed this from the url.

[stuible]

Also experiencing this issue with dynamic images. This error happens with or without require().

[danielroe]

Images should be placed in the static folder and referenced with leading forward slash - for example /image.png would be located in ~/static/image.png. This is because these images are not part of your webpack build and shouldn't be required.

I'm going to close this issue as I can't reproduce with the recent releases but if anyone is still experiencing it, please do comment with a reproduction and I'll reopen and investigate.

[mklueh]

Seems there is an option to be able to use the static directory https://image.nuxtjs.org/api/options#dir