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

Webpack 不解析 JS 变量提供的路径

Webpack not resolving paths supplied by JS variable

javascript

webpack

vue.js

ionic4