Vue NuxtJS 自定义图像标签未加载我的 src答案

【问题标题】：Vue NuxtJS custom image tag not loading my srcVue NuxtJS 自定义图像标签未加载我的 src
【发布时间】：2020-06-21 10:12:41
【问题描述】：

我想在 NuxtJS 中创建一个自定义图像组件（以传递 rgb 颜色并自动为图像着色），但是当我的 CustomImage 组件中的 img 获得路径传递时，它无法加载我的图像。

错误：

logotext.png:1 GET http://localhost:8080/@/assets/images/logotext.png 404 (Not 
Found)

我的自定义图像：

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

【问题讨论】：

你是如何定义和传递 src url 的？
试试<CustomImage src="~/assets/images/logotext.png" alt="Logo" />，如果不行，把图片移到static目录下的images文件夹，像<CustomImage src="/images/logotext.png" alt="Logo" />一样使用
谢谢。静态文件夹的解决方案对我有用！
好的，我会把它当作答案

标签： javascript typescript vue.js vuejs2 nuxtjs

【解决方案1】：

在static 目录中创建一个名为images 的文件夹并将您的图像移动到其中，然后按如下方式使用它们：

 <CustomImage src="/images/logotext.png" alt="Logo" />

/ 指的是静态目录。

查看this了解更多详情

【讨论】：