Question

在我的模板中，我试图显示以图像为背景的div。我的模板是：

<template>
  <section>
    <div 
      :style="{ backgroundImage: 'url(' + image2 + ')' }"
      class="circular"/>
    <div 
      :style="{ backgroundImage: 'url('+ image +')' }"
      class="dummy" />
  </section>
</template>

，image和image2的值设置如下：

<script>
...
import { mapState, mapMutations } from "vuex";
export default {
  name: "Apollo",
  data() {
    return {
      image2:
        "http://1.bp.blogspot.com/-8PfnHfgrH4I/TylX2v8pTMI/AAAAAAAAJJ4/TICBoSEI57o/s1600/search_by_image_image.png",
      image: "~@/assets/icon_aboutYou_color.svg"
    };
  },
  computed: {
    ...mapState({
...
</script>

样式部分是：

<style scoped>
.dummy {
  width: 90px;
  height: 90px;
}
.circular {
  width: 90px;
  height: 90px;
  background-size: cover;
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
}
</style>

第一个div的背景图片正确显示。实际上，这是我在网络上进行研究时发现的fiddle的副本。第二个没有。

我的猜测是@路径中的image符号在运行时无法解析，在编译阶段只能解析一次。 作为参数，我使用以下示例：

如果我在模板中添加第三个div，则使用与背景src相同的方式url：

<div><img 
  src="~@/assets/icon_aboutYou_color.svg" 
  alt="test"></div>

此处的图像显示正确。当我检查在Chrome中生成的网页源时，我看到image语句将inline设置为背景的div如下所示：

<div data-v-74161b7f="" class="dummy" style="background-image: url("~@/assets/icon_aboutYou_color.svg");"></div>

img看起来像已编译或已解析为其他值：

<div data-v-74161b7f=""><img data-v-74161b7f="" src="img/icon_aboutYou_color.2917b0e8.svg" alt="test"></div>

这正是我要使用inline style ={}语句要实现的目标。

我也可以使用预定义的类使其工作：

.about-icon {
  @include icon;
  background-image: url("~@/assets/icon_aboutYou_color.svg");
}

问题是： 是@符号在 compilation 阶段被解析并且在运行时不能被解析吗？

Answer 1

如果您指的是webpack别名，例如在webpack.base.conf.js中定义为true。它们是在运行时定义的，以后将不会更改。您可以使用webpack define插件将 myAssetPath 之类的字符串替换为webpack配置中的资产路径。然后，您可以在数据元素中访问它。

如果需要在运行时解析@，我建议使用REST调用，请求页面加载时需要的url将其存储在store或window对象中。然后，您只需编写：style =“ baseURL +'所需的内容'”，即可设计您的自定义网址。（baseURL需要指向您的URL）或者，您也可以使用中间件简单地代理请求。

Vue.js是否可以在运行时解析'@'符号？

1 个答案: