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, то при текущей конфигурации папка с картинками будет недоступна для сайта.
