Dynamic image loading to not work in Vue project!! On no dynamic everything loads correct

Question

I have this in my template :
<div class="row">
              
              <div v-for="(page, index) in paginatedImages" :key="index" class="col-lg-4 col-md-6">
              <div class="single-gallery">
                  <img :src="page.path" :alt="page.alt">
              </div>
              </div>
</div>


And on script for loading the images dynamically I have :

<script>
export default {
name: 'Gallery',
data() {
  return {
    galleryImages: [
    {
        path: '@/assets/images/services/whitening/whitening1.png',
        category: 'teeth-whitening'
      },
      {
        path: '@/assets/images/services/all6/all63.png',
        category: 'all6'
      },
      
      // Add other images with categories
    ],
};
}
</script>

and the problem is that do not load the images dynamically 

I try to load the images dynamically and i have the following error:Failed to load resource: the server responded with a status of 404 (Not Found)

Answer 1

The issue might be with the way you're referencing the image paths. You need to use "require" to use dynamic paths .

<template>
  <div class="row">
    <div v-for="(page, index) in paginatedImages" :key="index" class="col-lg-4 col-md-6">
      <div class="single-gallery">
        <img :src="require(page.path)" :alt="page.alt">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Gallery',
  data() {
    return {
      galleryImages: [
        {
          path: require('@/assets/images/services/whitening/whitening1.png'),
          alt: 'Description of the image'
        },
        {
          path: require('@/assets/images/services/all6/all63.png'),
          alt: 'Description of the image'
        },
        // Add other images with categories
      ],
    };
  }
}
</script>

Answer 2

I see one problem with your current code. The "path" needs to be a Url. Not a file path. I dont know what bundler you are using, but if you are using vite for example: https://vitejs.dev/guide/assets. Should also work with other bundlers similarly.

There are 3 ways in general:

1. You can import the asset directly.

import imgUrl from './img.png'
document.getElementById('hero-img').src = imgUrl

2. You can use assets, which are in a public directory.

Note that: You should always reference public assets using root absolute path - for example, public/icon.png should be referenced in source code as /icon.png. Assets in public cannot be imported from JavaScript.

3. using new URL

const imgUrl = new URL('./img.png', import.meta.url).href

document.getElementById('hero-img').src = imgUrl

I think in your case, using option 3 is the most optimal.

Answer 3

Did you try?

path: '~@/assets/images/services/whitening/whitening1.png'