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

【问题标题】：Webpack not resolving paths supplied by JS variableWebpack 不解析 JS 变量提供的路径
【发布时间】：2019-04-26 08:39:03
【问题描述】：

我正在使用 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"> 它会正确加载图像。

【问题讨论】：

你能提供 webpack 配置（或者你用来搭建 VueJS 项目的命令）吗？
Vue.js image v-for bind的可能重复
也许你可以在这里找到答案stackoverflow.com/questions/44948916/vue-js-image-v-for-bind
我对这个问题的回答可能会对您有所帮助：stackoverflow.com/questions/55818228/…
问题与提供的问题不重复，因为问题不是 vue 没有绑定 src，问题是 webpack 没有解析 src 属性提供的路径，当它由变量提供时。 @Stilleur 我没有更改 webpack 配置，它是使用 vue cli 3 UI 全新安装 Vue 提供的默认配置。

标签： javascript vue.js webpack ionic4

【解决方案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

【讨论】：