时间戳

首页 > 解决方案 > 我如何从另一个文件 vue 添加图像

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

问题描述

我有图片

     <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，但看不到图片。

标签： javascripthtmlvue.jscomponents

解决方案

// 假设您使用的是 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>

推荐阅读