如果我在模板中使用了@/
,它将正常工作:
<img src="@/assets/images/image.png">
但是,如果我在变量中使用它,则不会:我只是在DOM(<img src="@/...">
)中看到它完整无缺,这当然使图像根本无法在页面上呈现。
为什么?
<template>
<section>
<article
v-for="article in articles"
>
<img :src="article.imageUrl" />
...
</article>
</section>
</template>
<script>
export default {
data() {
return {
articles: [
{
imageUrl: "@/assets/images/AdobeStock_135975827_Preview.jpeg"
},
...
]
}
}
}
</script>
答案 0 :(得分:0)
由于使用了webpack,@
和~
仅适用于模板或脚本中的导入/需要。
因此,如果要在变量中定义url,请使用绝对URL。