javascript - 我如何从另一个文件vue添加图像

Question

我有图像

     <div class="header-title">
        <img
          v-if="icon.length"
          :src="icon"
          class="header-icon"
        >
        {{ title }}
      </div>

 props: {
    icon: {
      type: String,
      default: ''
    }
 }

我将此图像添加到另一个文件中:

  <app-dropdown-card
      title="Filters"
      icon="@/assets/images/talent-pool/filter.svg"
    />

但是我没有任何结果。图片就在那里 (@/assets/images/talent-pool/filter.svg) 浏览器看到标签 img 但看不到图片。

Answer 1

//假设您使用 Vue CLI 和单文件组件:

您必须import您正在使用它的组件中的图像，以及 v-bind图像源属性。

在您的情况下，它位于包含 <app-dropdown-card ... /> 的文件中:

<template>
  <!-- ... -->

    <app-dropdown-card
      title="Filters"
      :icon="filterImage"
    /> <!-- Note the binding: ':icon' or 'v-bind:icon' -->

  <!-- ... -->
</template>

<script>
// Note: Vue-CLI configures Webpack loaders for SVG files and other static assets: 
import filterImage from "@/assets/images/talent-pool/filter.svg";

// ...

export default {

  // ...

  data() {
    return {
      filterImage // Note that you can't access globals from template directly
    };
  }

  // ...

}
</script>