Getting a Vue Error: Cannot find module for image for dynamic image

Question

I looked at Vue cannot find module image location and couldn't figure out a solution.

in my code when I hard code it

:src="require('@/assets/featured/pizzaOne.jpeg')"

I get the image. But when I try

:src="require(`${item.img}`)"

I get Error: Cannot find module '@/assets/featured/pizzaOne.jpeg' Not sure why and how to fix this

Nikola Pavicevic · Accepted Answer · 2022-03-04 06:11:06Z

1

If you can change item.img to just name pizzaOne.jpeg, then in method:

methods: {
  getImgUrl: function (img) { 
     return require('@/assets/featured/' + img);
  }
}

end in template:

<img :src="getImgUrl(item.img)" />

edited Mar 4, 2022 at 6:11

answered Jan 15, 2022 at 17:46

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

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

1 Comment

Gergely M Over a year ago

Great solution! It works but you need to make sure the method name getImgUrl matches the one used in the <img> tag. So it's either getImgUrl or getImage, or anything you fancy really as long as the names matching.

Collectives™ on Stack Overflow

Getting a Vue Error: Cannot find module for image for dynamic image

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related