Webpack 无法解析 JS 变量提供的路径
2019-04-26
61
我正在使用 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">
它可以正确加载图像。
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>
blaz
2019-04-26