Trying to load an image inside a assets/img folder in a v-for, but the images does not load

Question

I'm trying to load the images in the assets/img folder in my vue3 project using a v-for inside a div, but they are not loading, just display my alt. So, I have a vue component what will display a title and a paragraph and also a image. The images are in the assets/img folder, I'm getting the path of the image with a store that I created. When I try to just put the path of the image like this: src="../assets/img/img2.jpg" the images renders.

Here is 1 of my state in the store.js:

content: [ { headline: 'Teste', paragraph: 'this is a paragraph', img: '@/assets/img/img.jpg' },]

Here is my template using the v-for:

<template> <div> <div class="slider" v-for="item, i in content" :key='i' > <h1>{{item.headline}}</h1> <p>{{item.paragraph}}</p> <img :src="item.img" alt="test" /> </div> </div> </template>

My setup:

 setup () { const store = useStore() const content = store.getters.getContent return { content } }

I tryed to use :src="require(item.img)" but i got a webpack error by doing this:

Uncaught Error: Cannot find module '@/assets/img/img.jpg' webpackEmptyContext components sync:2

Also tryed to point the folder of the images in the src, :src="@/assets/img + item.img", but it didn't work.

Yang · Accepted Answer · 2022-03-28 07:25:22Z

1

I met this question before. Maybe the following code could help you.

// create a function in util.js export const getSrc = ( name ) => { const path = `/src/assets/img/${name}` const modules = import.meta.globEager('/src/assets/img/*.jpg') return modules[path].default } // use getSrc in someItem.vue import { getSrc } from '@/util/util.js' content: [ { headline: 'Teste', paragraph: 'this is a paragraph', img: getSrc('img.jpg') } ]

answered Mar 28, 2022 at 7:25

Yang

2891 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Gustavo Saibro Over a year ago

It didin't work becuse I think i need to install a module to use that globEager. But from the part of the path give me a hint to use :src=require(@/assets/img/${item.img}) and them it worked!! Thank you!

Yang Over a year ago

thanks for your feedback. i forgot to tell you my env is vue3+vite. i guess your env is vue3+webpack, so globEager did not work. next time i will be more careful.

Gustavo Saibro Over a year ago

Oh sure! I have to study more about configs, but I will look for vite. I'm using the basic preset of vue cli. Thanks Yang! You help so much!

Collectives™ on Stack Overflow

Trying to load an image inside a assets/img folder in a v-for, but the images does not load

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related