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

您不能使用newvar= "$($initialvar | perl -pe 's/.+(Some_Dir\/)(.+)/\2/')" newvar= echo $initialvar | perl -pe 's/.+(Some_Dir\/)(.+)/\2/'引用静态资产，因为webpack需要在运行时之前重写静态路径。 v-for的值只会在运行时读取并解析为模板，因此不需要从webpack进行编译就可以将相对路径转换为bundle中的实际路径。

一种解决方案是使用image.src：

require()

演示沙箱：https://codesandbox.io/s/811px8kn88

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

1 个答案: