为什么 Nuxt3 不解析作为 props 传递给 Vue 组件的 URL？

Question

我有这个 Vue 组件 ProductPanel.vue，用于渲染产品：

<template>
    <div class="product-panel">
        <h2 class="text-center text-primary">
            <slot name="product-name"></slot>
        </h2>
        <img src="~/assets/image.png" alt="test (works)" style="border: thin solid red;"/>
        <img :src="logoUrl" alt="product logo (doesn't work)" />
    </div>
</template>

<script setup lang="ts">
const props = defineProps({
    logoUrl: String
});

onMounted(() => {
    console.log('Logo URL:', props.logoUrl);
});

</script>

我一直在这样测试：

  <ProductPanel logoUrl="~/assets/image.png">
    <template #product-name>Flux capacitor</template>
  </ProductPanel>

徽标通过 test img 标签显示，但当将相同的 URL 作为 prop 传入

logoUrl

时不显示。在控制台上，我看到

GET http://localhost:3002/reports/~/assets/icons/heart.png 404 (Page not found: /reports/~/assets/icons/heart.png)

。

作为 props 传递的图像 React Native 没有显示似乎相关，但适用于 React，并且（对我来说）没有建议解决方案。

我怀疑问题在于图像没有

required

，但我不确定解决此问题的最佳方法。我可以

require

中的

data

图像（例如

data () { logoUrl: require('@/assets/image.png') }

）然后通过它，但我希望有一个速记可以消除该路线的维护开销。

Answer 1

尝试导入图像并将其绑定到道具上：

<script setup>
 import img from '~/assets/image.png'
</script>
<template>
  <ProductPanel :logo-url="img">
    <template #product-name>Flux capacitor</template>
  </ProductPanel>
</template>

或者将其放在公共文件夹中并直接使用其路径。