Images coming through as text/html, not png - image

Question

I'm trying to get v-carousel to show an array of local images.
In my code, you can see I've tried several ways to access the images locally. Nothing shows.
I noticed in the devtools, that the files were coming through as text/html, yet they are saved in my local as PNGs. From what I can tell on my own research, there is some setting some where that needs to be changed??
Any ideas as to why this is the case?
<template>
<div>
<v-carousel>
<v-carousel-item
v-for="(photo, i) in photos"
:key="i"
:src="photo.src"
></v-carousel-item>
</v-carousel>
</div>
</template>
<script>
export default {
name: 'RotatingPhotos.vue',
data() {
return {
photos: [
{
src: '../src/assets/latte.png',
},
{
src: './src/assets/icedtea.png',
},
{
src: '#/src/assets/mocha.png',
},
{
src: 'src/assets/brunch.png',
},
],
};
},
};
</script>

Answer 1

the code where using src attribute in the vuetify.js is there: https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VImg/VImg.ts#L110
so, it use background-image: url() in css, the path based on css file.
then please refer to background-image URL not loading using Webpack

Answer 2

I discovered that the text/html designation was not the issue.
I had to use the require method.
photos: [
// Images wouldn't render unless I use the require method
{
src: require('#/assets/latte.png'),
},
{
src: require('#/assets/icedtea.png'),
},
{
src: require('#/assets/mocha.png'),
},
{
src: require('#/assets/brunch.png'),
},
],
};
},