Vue.js自定义组件找不到img

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

使用js对象记录图标信息。

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

然后，您可以在代码中到处使用这些图标。