Как я могу добавить изображения из другого файла vue

Question

У меня есть изображения i

     <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

попробуйте что-то вроде этого:

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

иногда это не сработает. попробуйте вместо имени передать изображение

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

Answer 2

Вставка изображения из локального источника. В TypeScript сработало это для моего:

Добавление директ к элементу:

<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>

Answer 3

// Если вы используете Vue CLI и Single-File-Components:

Вы должны 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>