Vue.js можно ли разрешить знак '@' во время выполнения?

Question

Vue.js можно ли разрешить знак '@' во время выполнения?

1

В моем шаблоне я пытаюсь отображать divs с изображениями в качестве фона. Мой шаблон:

<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 имеет фоновое изображение, отображаемое правильно. На самом деле это копия этой скрипки, которую я нашел во время моих исследований в Интернете. Второе - нет.

Я предполагаю, что знак @ в пути image не может быть разрешен во время выполнения и может быть разрешен только один раз, на этапе компиляции. В качестве аргумента я использую приведенный ниже пример:

Если я добавлю третий div к моему шаблону, так же, как и src как в фоновом url:

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

Изображение здесь отображается правильно. Когда я проверяю источник веб-страницы, который генерируется в Chrome, я вижу, что div с image установленным в качестве фона в inline заявлении, выглядит следующим образом:

<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 ={} statement.

Я также могу заставить его работать с использованием предопределенных классов:

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

Возникает вопрос: верно ли, что знак @ разрешен во время фазы компиляции и не может быть разрешен во время выполнения?

John Overiron 16 июль 2018, в 11:51

Источник

Теги:

javascript

vuejs2

compilation

runtime

1 ответ

Ещё вопросы

user1497119 · Answer 1 · 2018-07-16T14-11-00.000Z

Если вы имеете в виду псевдоним webpack, который, например, определен в webpack.base.conf.js, его значение истинно. Они определяются во время выполнения и не будут меняться впоследствии. Вы можете использовать плагин webpack define для замены строки, такой как myAssetPath, на ваш путь к ресурсу в конфигурации webpack. Тогда вы можете получить к нему доступ в своих элементах данных.

Если вам нужно разрешить @во время выполнения, я бы рекомендовал использовать вызов REST с запросом необходимого URL-адреса на загрузку страницы, чтобы сохранить его в хранилище или объекте окна. Затем вы можете создать свой собственный URL-адрес, написав: style = "baseURL +", что вам нужно ". (baseURL должен указывать на ваш URL-адрес). Или вы можете просто прокси-запросы, используя ваше промежуточное программное обеспечение.

« Они определяются во время выполнения », вы, вероятно, имели в виду время сборки ?
@ghybs Они определяются во время сборки, поэтому они определяются во время выполнения. Возможно проблема с языком? Боюсь, я не являюсь носителем английского языка.