Не могу нормально передать изображение пропсом во Vue.js

У меня есть компонент, который содержит картинку и текст. Компоненты отрисовываются через массив объектов. при этом я не могу нормально передать изображение, при чем я использую require и даже так не получается. Путь я точно указал верный). Вот код компонента:

```<template>
    <div class="packItem">
        <div class="packImgBlock">
            <img :src="require('@/assets/packImages' + src + '')">
        </div>
        <div class="packText">{{ title }}</div>
    </div>
</template>

<script>
    export default {
        props: {
            title: {
                type: String,
                required: true,
            },
            src: {
                type: File,
                required: true,
            }
        }
        
    }
</script>```

А вот код отрисовки компонента на странице:

```<my-pack v-for="pack in packs" :key="pack.id" :title="pack.title" :src="pack.src"></my-pack>
data() {
            return {
                packs: [
                    {id:1, title:'Фрукты', src:'pizza.png'},
                ]
            }
        }
```

Как результат не выводит ничего, хотя если бы я просто пытался передать путь к файлу, без require, компонент бы отрисовался, но без картинки. Еще выдает такую ошибку на странице -

```ERROR
Cannot read properties of null (reading 'parentNode')
TypeError: Cannot read properties of null (reading 'parentNode')
    at parentNode (webpack-internal:///./node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js:207:28)
    at ReactiveEffect.componentUpdateFn [as fn] (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5404:9)
    at ReactiveEffect.run (webpack-internal:///./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:217:19)
    at instance.update (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5433:16)
    at callWithErrorHandling (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:328:33)
    at flushJobs (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:517:9)```