javascript - 将图像名称传递给vue组件时找不到图像

Question

我正在尝试动态创建输入组件，因为我需要为每个输入提供一个特定的图标。图标设置为输入作为背景图像，当我像这样直接在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>

错误已解决，但没有任何显示！

究竟有什么问题？

标签： javascripthtmlcssvue.jsvue-component

Answer 1

如果您想使用模板中的图像，您需要使用@并且url应该是一个字符串。

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