изображения не найдены при передаче имени изображения компоненту vue

Question

Я пытаюсь создать компонент ввода динамически, так как мне нужно для каждого ввода определенный c значок для него. Значок устанавливается на вход в качестве фонового изображения, и он работает, когда я использую его непосредственно в css, например, background-image: url(../../assets/icons/email.svg);

Но когда я передаю имя значка для компонента, приложение говорит, что это не найдено!

    <template>
        <section class="input-box">
            <input class="input-field" type="text" :style="imgIcon">
            <label>{{title}}</label>
        </section>
    </template>

    <script>
      export default {
        props: ["title", "bgImg"],
        computed: {
          imgIcon() {
            return 'background-image: url(./assets/icons/' + this.bgImg + ')';
          }
        }
      }
    </script>

и когда я передаю имя в виде строки

<custome-input title="password" bgImg="'p_key.svg'"></custome-input>

ошибка устраняется, но ничего не отображается!

Что именно не так?

Answer 1

Используйте require при привязке к динамическому c изображению:

computed: {
  imgIcon() {
    try {
      return 'background-image: url(' + require('@/assets/icons/' + this.bgImg) + ')';
    } catch(error) {
      return ''; 
    }
  }
}

Ошибка, о которой вы упомянули в комментариях, заключается в том, что часть пути - это реквизит, который может быть еще не определен, когда этот первый вычисляется, поэтому он заключен в блок try.

Answer 2

Если вы хотите использовать изображения из шаблонов, вам нужно использовать @, а url должно быть строкой.

export default {
  props: ["title", "bgImg"],
  computed: {
    imgIcon() {
      return `background-image: url('@/assets/icons/${this.bgImg}')`;
    }
  }
}