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引用靜態資產，因為webpack需要在運行時之前重寫靜態路徑。 image.src的值將僅在運行時讀取並解析為模板，因此沒有從webpack進行編譯以將相對路徑轉換為bundle中的實際路徑的情況。

一種解決方案是使用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