Vue.js, не могу сослаться на файл

Проблема в том, что если я руками напишу этот путь в атрибут, то все будет работать, но я хочу чтобы все работало через v-bind, но в таком случае он пишет мне Not Found в консоль. Я попробовал просто сбросить этот файл во все папки проекта и ничего, так что вообще не пойму что не так. (В вебе я прям полный ноль, так что может проблема и очевидная). Файлы конфигурации не менял, создавал через vue-cli

<template>
    <div class="cards_container">
        <div v-for="item in items" class="card" v-bind:style="{ backgroundImage: 'url(' + item.path + ')' }">
        </div>
    </div>
</template>
    
<script>
export default
{
    props:{
        items:{
            type:Array,
            required:true
        }
        
    }
}
</script>
    
<style>
    
</style>

путь в item.path выглядит так ./images/pictures/1.jpg

Структура проекта

Структура проекта


Ответы (1 шт):

Автор решения: Виктор Карев

Файл App.vue не является файлом, который понимается браузером. Поэтому он компилируется, и из него получаются скомпилированные файлы. Они будут располагаться не в корневой папке, поэтому относительный путь ./images/pictures/1.jpg будет вычисляться неправильно.

Для того, чтобы преодолеть эту ошибку, необходимо использовать не относительный путь, а абсолютный путь от корня сайта.

Какая папка является корневой для сайта? Если catalog, то абсолютный путь будет /src/images/pictures/1.jpg. А если public, то при текущей конфигурации папка с картинками будет недоступна для сайта.

→ Ссылка