存储在变量中的图像路径无法在模板中正确呈现

Question

如果我在模板中使用@/，它将正常工作：

<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>

Answer 1

别名仅适用于模板或脚本中的导入/要求因此，如果要在变量中定义url，请使用绝对URL。