Nuxt•3mo ago

How to render image dynamically in Nuxt?

<span class="font-semibold">
  {{ item.title }}
<img :src="`@/assets/images/${activeIndex === index ? 'minus' : 'plus'}.webp`" class="w-4 h-4" />
</span>

<span class="font-semibold">
  {{ item.title }}
<img :src="`@/assets/images/${activeIndex === index ? 'minus' : 'plus'}.webp`" class="w-4 h-4" />
</span>

The page renders but the image does not display

3 Replies

taunoha•3mo ago

Have you tried to put the images into the public folder and use a relative URL to access them?

<img :src="`/images/${activeIndex === index ? 'minus' : 'plus'}.webp`" class="w-4 h-4" />

<img :src="`/images/${activeIndex === index ? 'minus' : 'plus'}.webp`" class="w-4 h-4" />

taunoha•3mo ago

The difference between the public and assets folders is described here: https://nuxt.com/docs/getting-started/assets

Nuxt

Assets · Get Started with Nuxt

Nuxt offers two options for your assets.

manniL•3mo ago

@o.m https://www.lichter.io/articles/nuxt3-vue3-dynamic-images/

www.lichter.io

Vue 3: How to load dynamic images

With the release of Vue 3, a lot of things became easier. Unfortunately, loading dynamic assets such as images is not one of them. In the following article, I want to demystify the process of dynamic asset loading in Vue 3 or Nuxt 3 and explain why static assets can be loaded easily...

Gaming

Programming

How to render image dynamically in Nuxt?