1

I am working on SSR projects (Nuxt, Quasar). When I try to display a dynamic image in a child component, the image is not displayed.

My current code is:

function getUrl (img: string)  {
  return require(`@/assets/imgs/sidebar/${img}.png`);
}

It shows error message

Cannot find module '@/assets/imgs/sidebar/side_1.png.png' Require stack: - E:\Work\0503_game777\nuxt-quasar\components\sidebar\SideBarItem.vue

I don't know what is the reason but the image path is correct and also it shows when I use the path directly.

And also I tried like this:

function getUrl (img: string)  {
  return `/_nuxt/assets/imgs/sidebar/${img}`;
}

It works locally but, when I built it, then it doesn't show the image.

I tried to get dynamic image path with "import" instead of "require()" but is show the promise error. My current code is TypeScript.

halfer
  • 19,824
  • 17
  • 99
  • 186
James
  • 29
  • 2
  • 1
    This link might be helpful for you https://stackoverflow.com/questions/74688433/why-loading-dynamically-assets-fails-on-nuxt-v3 – ReaganM May 22 '23 at 13:57

1 Answers1

0

I've solve the problem by moving the image to public folder. Thanks

James
  • 29
  • 2