Webpack无法解析JS变量提供的路径

Question

I'm making an app with vue and ionic, but when trying to load assets the paths are not resolving.

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

The path in the src attribute appears like the one typed in the var '@/assets/xxx.png' .

But if I do it directly, by typing the src in the image manually, like <img src="@/assets/xxx.png"> It loads the image correctly.

Answer 1

You cannot refer static assets using v-for , since webpack needs to rewrite static paths before runtime. The values of image.src will only be read and parsed to template at runtime, so there is no compiling from webpack to translate relative paths to real paths in bundle.

One solution is using 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>

Demo sandbox: https://codesandbox.io/s/811px8kn88