图像不加载 vuejs 脚本设置

Question

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

这是我的尝试：

基本的 :src="imagePath" 没有加载

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

import(../${imagePath}) return 未定义的 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:

尝试用 new URL('path_here', import.meta.url).href

包裹 URL

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

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

Vite docs: new URL

此外，如果您想深入研究，还有一个关于 assets with dynamic URL 的未决问题。

图像不加载 vuejs 脚本设置

image doesn't load vuejs script setup

javascript

src

vuejs3

vite

父组件

子组件