javascript - 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 进行编译以将相对路径转换为包中的真实路径。

一种解决方案是使用 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