Как указать src изображения из переменной во Vue.js?

Question

[alzow]

Изучаю Vue.js (попутно разбираясь с webpack), и столкнулся со следующей проблемой: с помощью v-for вывожу список категорий, а изображение категории не отображается (404).

<template>  
            <div v-for="cat in categories" :key="cat.id">
                <CategoryCard :category="cat"></CategoryCard>
            </div>
</template>

Родительский компонент
<script>
import CategoryCard from '@/components/CategoryCard';

export default {
    name: 'Categories',
    components: {CategoryCard},
    data: function(){
        return {
            categories: [
                {name: 'Медицина', id: 1, image: './../assets/logo.png'},
                {name: 'Архитектура', id: 2, image: './../assets/logo.png'},
                {name: 'Искусство', id: 3, image: './../assets/logo.png'},
                {name: 'Автомобили', id: 4, image: './../assets/logo.png'},
                {name: 'Техника', id: 5, image: './../assets/logo.png'},
                {name: 'Криптовалюты', id: 6, image: './../assets/logo.png'},
                {name: 'Еще что-то', id: 7, image: './../assets/logo.png'},
            ]
        }
    }
}
</script>

Дочерний:

<template>
    <div class="card">
        <div class="card-image">
          <img :src="category.image">
          <span class="card-title">{{ category.name }}</span>
        </div>
      </div>
</template>

<script>
export default {
    name: 'CategoryCard',
    props: ['category'],
}
</script>

Соответственно, вот эта нотация не работает:
<img :src="category.image">

А вот эта работает:
<img src="./../assets/logo.png">

Как сделать чтобы работала первая?

Answer 1

[Антон Антон]

При использовании шаблона webpack из vue-cli картинки, которые должны идти без обработки, следует класть в static (или её подпапку), и пути к ним писать так, как будто бы static лежит в корне, рядом с index.html. Если хочется класть в assets (или используется другой шаблон/полностью ручная настройка), то следует настроить webpack таким образом, чтобы имена картинок после url-loader или другого используемого модуля были предсказуемы (например при ресайзе - указывать целевое разрешение в имени файла) и указывать уже это выходное имя файла в свойстве.

Comments

[Andrey43rus]

Подскажите пожалуйста как это сделать, в каком файле, какой командой

Answer 2

[Александр Аксентьев]

image: '../assets/logo.png'

<img src="./../assets/logo.png">

А почему пути по разному написаны? Хотя по сути-то они одинаковые, но кто знает как у вас там что настроено.

Пример на фидл бы как не работает это.

Comments

[alzow]

исправил, но это в моем случае не принципиально. проблема-то не в этом

[Александр Аксентьев]

alzow, пути-то в браузере посмотрите как они запрашивают в случае 404 и в случае когда работает.

[alzow]

Александр Аксентьев, Если захардкодить путь - то в браузере показывает src показывается как base64.

[Александр Аксентьев]

alzow, таки у вас наверно стоит обработка в сборщике, поэтому и показывает base64, а по путям никакие картинки вообще не лежат на выходе.

Копируйте в папку билда или откуда сервер работает папку с ассетами.

[alzow]

Александр Аксентьев, есть файл по указанному пути в папке.

[Александр Аксентьев]

alzow, ну значит по вашим словам все должно работать, проблема решена xD

Браузер-то наконец откройте и посмотрите какая полная ссылка получается с 404 ошибкой
И потом посмотрите на ссылку на которая не выдаёт 404, если такая вообще существует, потому что как мы выяснили у вас вставляется на путь, а картинка в base64 в финальном билде.