Vue.js 自定義組件找不到img src

Question

所以我試圖制作一個自定義組件，從我的資產中的特定目錄插入一個 icon.svg。 該組件加載良好，自定義屬性也可以正常工作，但是當他們嘗試查找圖像時，我收到 404 錯誤。

    <template>
  <img :src="'../src/assets/heroicons/'+this.styling+'/'+this.icon+'.svg'" alt=""> <!-- this one does not work -->
  <img src="../src/assets/heroicons/solid/database.svg" alt=""> <!-- this one works -->
</template>

<script>
export default {
  name: "IconComp",
  props: [
    'styling',
      'icon'
  ],
  created() {
    console.log(this.styling+' '+this.icon)
  }
}
</script>

<style scoped>
  img {
    filter: invert(100%);
  }
</style>

正如您在圖像中看到的那樣，屬性最終位於正確的位置，但找不到文件。

Answer 1

我在 vue 中使用圖像：

  <template>
    <img class="avatar__img" src="src/assets/img/task.png" alt="profile avatar">
    or
    <img class="task__img" :src="task.img" :alt="task.alt">
  </template>

  <script>
    const task = {
         alt: 'alt for task 1',
        img: 'src/assets/img/task.png',
    }
  </script>

img路徑：projectName/src/assets/img/task.png
組件：項目名稱/src/pages/tasks/index.vue

Answer 2

使用 js object 記錄圖標信息

export default {
    icon1: require('@/assets/.......'),
    icon2: require('@/assets/.......'),
    icon3: require('@/assets/.......'),
    icon4: require('@/assets/.......'),
}

然后你可以在你的代碼中到處使用這些圖標