NUXT3 VUE3：如何将本地 img src 路径传递给 nuxt 项目中的 vue 组件

Question

我正在将存储在

~/assets/img

文件夹中的本地图像的url传递给Vue3组件，但我无法以任何方式呈现它们。

这个作品

<img
  src="~/assets/img/tds_logo.png"
/>

但这行不通

<img
  :src="require(`~/assets/img/` + fileName)"
/>

最后一个文字

fileName

是我传递给 Vue 组件以呈现 img 的东西，我已经检查过它等于

tds_logo.png

在我的例子中。

相反，我收到此错误：

[nitro] [dev] [unhandledRejection] Error: Cannot find module '~/assets/img/tds_logo.png'

有人知道我做错了什么吗？

按照这个https://nuxtjs.org/docs/directory-structure/assets/我不需要配置任何东西，对吧？

Answer 1

Vite 没有像 webpack 那样内置

require

，只有导入。

在 Nuxt3 / Vue3 中

为组件写一个方法如下：

 props: ['imagename'],
 methods: {
    getImageUrl(imagename) {
      const imageUrl = new URL(`/assets/img/${imagename}`, import.meta.url).href
      return imageUrl;

    }
  }

然后在模板中使用这个方法：

<img
:src="getImageUrl(imagename)"
  
/>