Nuxt JS вычисленный значок не загружать со свойством в качестве источника - PullRequest
Новая
       72

Nuxt JS вычисленный значок не загружать со свойством в качестве источника

0 голосов
/ 11 июля 2020

Я хочу создать общий компонент контейнера svg, в котором я могу передать свой svg sr c в виде строки, а контейнер выполняет всю мою обработку. Приведенный ниже код является моим полным контейнером и работает, пока я установил sr c как строку в вычисляемом значке. Когда я использую this.sr c для создания моего filePath, он не работает. Но одна и та же строка создается вместе.

Рабочий компонент контейнера: 

<template>
  <div :style="icon"></div>
</template>

<script lang="ts">
import Vue from 'vue';
import { Component, Prop } from 'nuxt-property-decorator';

@Component({})
export default class SvgContainer extends Vue {
  @Prop({
    required: false,
    type: String,
  })
  public src!: string;

  protected get icon() {
    const icon = require('~/static/icons/burger-menu.svg?data');

    return {
      'mask-image': `url(${icon})`,
      '-webkit-mask-image': `url(${icon})`,
      'width': '1em',
      'height': '1em',
      'background-color': 'var(--default-icon-fill-color)',
      'mask-repeat': 'no-repeat',
    };
  }
}
</script>

<style scoped>
</style>

С этим вычисленным значком мой svg-контейнер не работает. 


  protected get icon() {
    const filePath: string = `~@${this.src}?data`;
    const icon = require(filePath);

    return {
      'mask-image': `url(${icon})`,
      '-webkit-mask-image': `url(${icon})`,
      'width': '1em',
      'height': '1em',
      'background-color': 'var(--default-icon-fill-color)',
      'mask-repeat': 'no-repeat',
    };
  }

Кто-нибудь знает почему?

Спасибо.

...