Webpack не разрешает пути, предоставленные переменной JS

Question

Я создаю приложение с vue и ionic, но при попытке загрузить ресурсы пути не разрешаются.

<template>
    <div id="index">

        <img :src="image.src" v-for="image in images">

    </div>
</template>

<script>
export default {

    name: 'Inicio',

    data() {
        return {
            images: [
                {src: '@/assets/xxx.png'},
                {src: '@/assets/xxxx.png'},
                {src: '@/assets/xxx.png'}
            ]
        }
    }
}
</script>

Путь в атрибуте src выглядит так же, как напечатанный в var '@/assets/xxx.png'.

Но если я сделаю это напрямую, набрав src на изображении вручную, как <img src="@/assets/xxx.png">. Он загрузит изображение правильно.

Answer 1

Вы не можете ссылаться на статические ресурсы, используя v-for, так как веб-пакет должен переписать статические пути перед выполнением. Значения image.src будут считываться и анализироваться только в шаблоне во время выполнения, поэтому компиляция из веб-пакета для преобразования относительных путей в реальные пути в пакете не производится.

Одно решение использует require():

<template>
    <div id="index">

        <img :src="image.src" v-for="image in images">

    </div>
</template>

<script>
export default {

    name: 'Inicio',

    data() {
        return {
            images: [
                {src: require('@/assets/xxx.png') },
                {src: require('@/assets/xxxx.png') },
                {src: require('@/assets/xxx.png') }
            ]
        }
    }
}
</script>

Демонстрационная песочница: https://codesandbox.io/s/811px8kn88