图像未加载vuejs脚本设置

Question

我试图在子组件中动态加载图像，但图像没有加载。

这是我尝试过的：

基本的 :src="imagePath" 未加载

require 不再可用，因此不起作用

import( ../${imagePath}) 返回一个未定义的 Promise

这是我的代码：

父组件

<script setup lang="ts">
import TheProject from './utils/TheProject.vue';


const projects = [
  {
    idProject: 1,
    title: "title",
    desc: "desc",
    imagePath: "../path/..",
    cardColor: "C4F6DE"
  },
]

</script>

<template>
      <div v-for="project in projects">
        <TheProject :idProject="project.idProject" :title="project.title" 
        :desc="project.desc" :imagePath="project.imagePath" :cardColor="project.cardColor" />
  </div>
</template>

子组件

<script setup lang="ts">

import { onMounted } from 'vue';

const props = defineProps({
    idProject: Number,
    title: String,
    desc: String,
    imagePath: String,
    cardColor: String
})

</script>

<template>
  <img :src="props.imagePath" />
</template>

Answer 1

我猜你正在使用 Vite：

尝试将 URL 包裹起来new URL('path_here', import.meta.url).href

<script setup>
const imagePath = new URL('./logo.png', import.meta.url).href
</script>

<template>
 <img :src="imagePath" />
</template>

Vite 文档：新 URL

此外，如果您想更深入地研究，还有一个关于具有动态 URL 的资产的开放问题。