我想在NuxtJS中创建一个自定义图像组件(传递rgb颜色并自动为图像着色),但是当我的CustomImage组件中的img获得路径通过时,它无法加载我的图像。
错误:
logotext.png:1 GET http://localhost:8080/@/assets/images/logotext.png 404 (Not
Found)
我的CustomImage:
<template>
<img :src="src" :alt="alt" />
</template>
<script lang="ts">
import Vue from 'vue';
import { Component, Prop } from 'nuxt-property-decorator';
@Component({})
export default class CustomImage extends Vue {
@Prop({
type: String,
required: true,
})
public src!: string;
@Prop({
type: String,
required: true,
})
public alt!: string;
}
</script>
在statice
目录中创建一个名为images
的文件夹,并将您的图像移入其中,然后按如下方式使用它们:
<CustomImage src="/images/logotext.png" alt="Logo" />
/
指的是静态目录。
查看此选项以获取更多详细信息