Nuxt 动态图片 - Require is not defined

Question

在 Nuxt 文档中，他们给出了以下用于动态图像加载的代码示例。

<img :src="require(`~/assets/img/${image}.jpg`)" />

但是，当我使用它时，我在浏览器控制台中收到以下错误“要求未定义“

Answer 1

回答我的问题，因为它花了我一整天的搜索......

显然'require()' 仅适用于 Webpack，不适用于 Vite.
由于 Nuxt3 默认与 Vite 一起提供，因此它不适用于我。

因此，有 2 个选项可以解决此问题：

1. 从 Vite 更改为 Webpack。

2. 使用下面的代码而不是 Nuxt 文档中描述的代码来导入动态图像。

   // in HTML
   <img :src="getImageUrl()"/>
   
   // in script
   function getImageUrl(name) {
     return new URL(`./dir/${name}.png`, import.meta.url).href
   }
   

   有用的资源:

   • https://vitejs.dev/guide/assets.html#new-url-url-import-meta-url
   • https://github.com/nuxt/nuxt/issues/12797