How to specify image src from variable in Vue.js?

Question

Images

I'm learning Vue.js (learning webpack along the way) and I've encountered the following problem: using v-for I'm displaying a list of categories, but the category image is not displayed (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>

Child:

<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>

Accordingly, this notation does not work:
<img :src="category.image">
But this one works:
<img src="./../assets/logo.png">
How to make the first one work?

Answer 1

When using the webpack template from vue-cli, pictures that should go without processing should be placed in static (or its subfolder), and the paths to them should be written as if static were at the root, next to index.html. If you want to put in assets (or use a different template / completely manual configuration), then you should configure webpack in such a way that the names of the pictures after the url-loader or other module used are predictable (for example, when resizing - indicate the target permission in the file name) and specify is already the output filename in the property.

Answer 2

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

Why are the paths written differently? Although in fact they are the same, but who knows how you have what is configured there.
A fiddle example of how this doesn't work.