[Vuejs]-Nuxt Image module not rendering dynamic images (Nuxt 2)

by

0👍

try to change the nuxt-img add a

:src="require(`@/static/img/main/${image}.jpg`)"

to

:img-src="require(`@/static/img/main/${image}.jpg`)"

the code:

<nuxt-picture
      :class="
        imageIsLeft
          ? 'md:-translate-x-5 xl:-translate-x-0'
          : 'md:translate-x-5 xl:translate-x-0'
      "
      class="image-full md:max-w-[500px] md:w-full"
      :img-src="require(`@/static/img/main/${image}.jpg`)"
      height="569"
      width="500"
      loading="lazy"
      alt="headshot"
    >
    <template #default="{ src, sources, imgAttrs }">
    <img :src="src" :srcset="sources" :width="500" :height="569" :alt="headshot" :loading="'lazy'" :class="imgAttrs.class" />
  </template>
</nuxt-picture>

0👍

Using require("@/static/img/main/${image}.jpg") would not work.

The following is from the @nuxtJS/image documentation:

src should be in the form of an absolute path for static images in static/ directory. Otherwise path that is expected by provider that starts with / or a URL.

Images should be stored in the static/ directory of your project.
For example, when using <nuxt-img src="/nuxt-icon.png" />, it should be placed in static/ folder under the path static/nuxt-icon.png.

So instead of using:

<nuxt-img :src="require(`@/static/img/main/${image}.jpg`)"/>

Using this should solve the problem:

<nuxt-img :src="`/img/main/${image}.jpg`"/>

Leave a comment