我如何从另一个文件 vue 添加图像答案

【问题标题】：How i can add images from another file vue我如何从另一个文件 vue 添加图像
【发布时间】：2020-06-17 09:02:19
【问题描述】：

我有图片我

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

【问题讨论】：

标签： javascript html vue.js components

【解决方案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>

【讨论】：

【解决方案2】：

试试这样的：

<img :src="require(`${icon}`)" />

有时它不起作用。尝试传递图像的名称

<img :src="require(`@/assets/images/talent-pool/${iconName}.svg`)" />

【讨论】：

【解决方案3】：

插入来自本地来源的图像。在 TypeScript 中为我工作：

向元素添加 direkt：

<img src="./vmSocks-green-onWhite.jpg" />

或带绑定

<template>
    <img v-bind:src="myImage" />
</template>

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

  import testImage from "./vmSocks-green-onWhite.jpg"


  @Component({
      components: {

      }
  })
  export default class App extends Vue {    

      myImage=testImage;
  }
</script>

【讨论】：