<img>使用从资源动态导入作为源时不显示

Question

这曾经与 Nuxt2 一起使用。我需要做什么才能使其与 Nuxt3 一起使用？图像没有显示，但我也没有收到错误。

<template>
    <button @click="doImportImage()">Import image</button>
    <template v-if="contactAvatarUrl">
        <img :src="contactAvatarUrl"
                width="100px"
                height="100px">
    </template>
</template>

<script setup lang="ts">
let contactAvatarUrl = ref();

const doImportImage = async () => {
    const contactAvatar = await import('~/assets/img/contact/1.jpg');
    contactAvatarUrl.value = contactAvatar.default
}
</script>

图像 URL 解析为 /_nuxt/assets/img/contact/1.jpg

我仔细阅读了文档，以及他们的示例

<template>
  <img src="~/assets/img/nuxt.png" alt="Discover Nuxt 3" />
</template>

仅在以下情况下有效

配置了构建工具来处理此文件扩展名

这是什么意思？我如何告诉 nuxt 处理 PNG 和 JPG 文件？

Answer 1

所以这篇文章回答了这个问题：

https://www.lichter.io/articles/nuxt3-vue3-dynamic-images/ https://github.com/nuxt/nuxt/issues/14766/

现在，我会将我的图像移至公共文件夹...