Images Not displayed in V4

### Environment

Working directory: /home/patrick/test/testimage                                                                                                                                 nuxi 11:52:53
Nuxt project info: (copied to clipboard)                                                                                                                                        nuxi 11:52:53

------------------------------
- Operating System: Linux
- Node Version:     v22.15.0
- Nuxt Version:     4.0.0
- CLI Version:      3.26.2
- Nitro Version:    2.12.0
- Package Manager:  npm@10.9.2
- Builder:          -
- User Config:      compatibilityDate, devtools
- Runtime Modules:  -
- Build Modules:    -
------------------------------

👉 Report an issue: https://github.com/nuxt/nuxt/issues/new?template=bug-report.yml
👉 Suggest an improvement: https://github.com/nuxt/nuxt/discussions/new
👉 Read documentation: https://nuxt.com

### Reproduction

npm create nuxt testimage
 
Replace _< NuxtWelcome / >_ with
_< img src="~~/public/favicon.ico" alt="icon" / >_





### Describe the bug

The error occurs:
```
[plugin:vite:import-analysis] Failed to resolve import "~/public/favicon.ico" from "app/app.vue". Does the file exist?

/home/patrick/test/testimage/app/app.vue:4:36

5  |  const _sfc_main = {  }
6  |  import { resolveComponent as _resolveComponent, createVNode as _createVNode, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
7  |  import _imports_0 from '~/public/favicon.ico'
```

### Additional context

A temporary workaround is:
```
cd app
ln -s ../public public
```


### Logs

```shell-script
Nuxt 4.0.0 with Nitro 2.12.0                                                                     nuxi 12:03:50
                                                                                                      12:03:50
  ➜ Local:    http://localhost:3000/
  ➜ Network:  use --host to expose

  ➜ DevTools: press Shift + Alt + D in the browser (v2.6.2)                                           12:03:50

✔ Vite client built in 16ms                                                                          12:03:50
✔ Vite server built in 22ms                                                                          12:03:50
✔ Nuxt Nitro server built in 352ms                                                             nitro 12:03:51
ℹ Vite client warmed up in 2ms                                                                       12:03:51
ℹ Vite server warmed up in 15ms                                                                      12:03:51
 ERROR  [request error] [unhandled] [GET] http://localhost:3000/                                      12:04:02

 
ℹ Error: Cannot find module '~/public/favicon.ico' imported from './app/app.vue'.

- If you rely on tsconfig.json's "paths" to resolve modules, please install "vite-tsconfig-paths" plugin to handle module resolution.
- Make sure you don't have relative aliases in your Vitest config. Use absolute paths instead. Read more: https://vitest.dev/guide/common-errors

 ⁃ at ViteNodeRunner._resolveUrl (node_modules/vite-node/dist/client.mjs:207:18)
 ⁃ at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
 ⁃ at async ViteNodeRunner.resolveUrl (node_modules/vite-node/dist/client.mjs:232:11)
 ⁃ at async request (node_modules/vite-node/dist/client.mjs:260:28)
 ⁃ (async app/app.vue:6:31)
 ⁃ at async ViteNodeRunner.runModule (node_modules/vite-node/dist/client.mjs:397:4)
 ⁃ at async ViteNodeRunner.directRequest (node_modules/vite-node/dist/client.mjs:375:3)
 ⁃ at async ViteNodeRunner.cachedRequest (node_modules/vite-node/dist/client.mjs:189:11)
 ⁃ at async ViteNodeRunner.dependencyRequest (node_modules/vite-node/dist/client.mjs:239:10)
 ⁃ (async virtual:nuxt:%2Fhome%2Fpatrick%2Ftest%2Ftestimage%2F.nuxt%2Fapp-component.mjs:2:31)

[CAUSE]
Error {
  stack: "Cannot find module '~/public/favicon.ico' imported from './app/app.vue'.\n" +
  '\n' +
  - If you rely on tsconfig.json's "paths" to resolve modules, please install "vite-tsconfig-paths" plugin to handle module resolution.\n +
  "- Make sure you don't have relative aliases in your Vitest config. Use absolute paths instead. Read more: https://vitest.dev/guide/common-errors\n" +
  'at ViteNodeRunner._resolveUrl (./node_modules/vite-node/dist/client.mjs:207:18)\n' +
  '    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)\n' +
  'at async ViteNodeRunner.resolveUrl (./node_modules/vite-node/dist/client.mjs:232:11)\n' +
  'at async request (./node_modules/vite-node/dist/client.mjs:260:28)\n' +
  'at async ./app/app.vue:6:31)\n' +
  'at async ViteNodeRunner.runModule (./node_modules/vite-node/dist/client.mjs:397:4)\n' +
  'at async ViteNodeRunner.directRequest (/home/patrick/test/'... 382 more characters,
  message: "Cannot find module '~/public/favicon.ico' imported from 
  './app/app.vue'.\n" +
  
  '\n' +
  
  - If you rely on tsconfig.json's "paths" to resolve modules, please 
  install "vite-tsconfig-paths" plugin to handle module resolution.\n +
  
  "- Make sure you don't have relative aliases in your Vitest config. 
  Use absolute paths instead. Read more: 
  https://vitest.dev/guide/common-errors",
  code: 'ERR_MODULE_NOT_FOUND',
  [Symbol(vitest.error.not_found.data)]: {
    id: '~/public/favicon.ico',
    importer: './app/app.vue',
  },
}
[12:04:02]  ERROR  [request error] [unhandled] [GET] http://localhost:3000/__nuxt_error?error=true&url=%2F&statusCode=500&statusMessage=Server+Error&message=Cannot+find+module+%27~%2Fpublic%2Ffavicon.ico%27+imported+from+%27%2Fhome%2Fpatrick%2Ftest%2Ftestimage%2Fapp%2Fapp.vue%27.%0A%0A-+If+you+rely+on+tsconfig.json%27s+%22paths%22+to+resolve+modules,+please+install+%22vite-tsconfig-paths%22+plugin+to+handle+module+resolution.%0A-+Make+sure+you+don%27t+have+relative+aliases+in+your+Vitest+config.+Use+absolute+paths+instead.+Read+more:+https:%2F%2Fvitest.dev%2Fguide%2Fcommon-errors&stack=Cannot+find+module+%27~%2Fpublic%2Ffavicon.ico%27+imported+from+%27%2Fhome%2Fpatrick%2Ftest%2Ftestimage%2Fapp%2Fapp.vue%27.%0A%0A-+If+you+rely+on+tsconfig.json%27s+%22paths%22+to+resolve+modules,+please+install+%22vite-tsconfig-paths%22+plugin+to+handle+module+resolution.%0A-+Make+sure+you+don%27t+have+relative+aliases+in+your+Vitest+config.+Use+absolute+paths+instead.+Read+more:+https:%2F%2Fvitest.dev%2Fguide%2Fcommon-errors%0Aat+ViteNodeRunner._resolveUrl+(%2Fhome%2Fpatrick%2Ftest%2Ftestimage%2Fnode_modules%2Fvite-node%2Fdist%2Fclient.mjs:207:18)%0Aat+process.processTicksAndRejections+(node:internal%2Fprocess%2Ftask_queues:105:5)%0Aat+async+ViteNodeRunner.resolveUrl+(%2Fhome%2Fpatrick%2Ftest%2Ftestimage%2Fnode_modules%2Fvite-node%2Fdist%2Fclient.mjs:232:11)%0Aat+async+request+(%2Fhome%2Fpatrick%2Ftest%2Ftestimage%2Fnode_modules%2Fvite-node%2Fdist%2Fclient.mjs:260:28)%0Aat+async+%2Fhome%2Fpatrick%2Ftest%2Ftestimage%2Fapp%2Fapp.vue:6:31)%0Aat+async+ViteNodeRunner.runModule+(%2Fhome%2Fpatrick%2Ftest%2Ftestimage%2Fnode_modules%2Fvite-node%2Fdist%2Fclient.mjs:397:4)%0Aat+async+ViteNodeRunner.directRequest+(%2Fhome%2Fpatrick%2Ftest%2Ftestimage%2Fnode_modules%2Fvite-node%2Fdist%2Fclient.mjs:375:3)%0Aat+async+ViteNodeRunner.cachedRequest+(%2Fhome%2Fpatrick%2Ftest%2Ftestimage%2Fnode_modules%2Fvite-node%2Fdist%2Fclient.mjs:189:11)%0Aat+async+ViteNodeRunner.dependencyRequest+(%2Fhome%2Fpatrick%2Ftest%2Ftestimage%2Fnode_modules%2Fvite-node%2Fdist%2Fclient.mjs:239:10)%0Aat+async+virtual:nuxt:%252Fhome%252Fpatrick%252Ftest%252Ftestimage%252F.nuxt%252Fapp-component.mjs:2:31)

 
ℹ Error: Cannot find module '~/public/favicon.ico' imported from './app/app.vue'.

- If you rely on tsconfig.json's "paths" to resolve modules, please install "vite-tsconfig-paths" plugin to handle module resolution.
- Make sure you don't have relative aliases in your Vitest config. Use absolute paths instead. Read more: https://vitest.dev/guide/common-errors

 ⁃ at ViteNodeRunner._resolveUrl (node_modules/vite-node/dist/client.mjs:207:18)
 ⁃ at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
 ⁃ at async ViteNodeRunner.resolveUrl (node_modules/vite-node/dist/client.mjs:232:11)
 ⁃ at async request (node_modules/vite-node/dist/client.mjs:260:28)
 ⁃ (async app/app.vue:6:31)
 ⁃ at async ViteNodeRunner.runModule (node_modules/vite-node/dist/client.mjs:397:4)
 ⁃ at async ViteNodeRunner.directRequest (node_modules/vite-node/dist/client.mjs:375:3)
 ⁃ at async ViteNodeRunner.cachedRequest (node_modules/vite-node/dist/client.mjs:189:11)
 ⁃ at async ViteNodeRunner.dependencyRequest (node_modules/vite-node/dist/client.mjs:239:10)
 ⁃ (async virtual:nuxt:%2Fhome%2Fpatrick%2Ftest%2Ftestimage%2F.nuxt%2Fapp-component.mjs:2:31)

[CAUSE]
Error {
  stack: "Cannot find module '~/public/favicon.ico' imported from './app/app.vue'.\n" +
  '\n' +
  - If you rely on tsconfig.json's "paths" to resolve modules, please install "vite-tsconfig-paths" plugin to handle module resolution.\n +
  "- Make sure you don't have relative aliases in your Vitest config. Use absolute paths instead. Read more: https://vitest.dev/guide/common-errors\n" +
  'at ViteNodeRunner._resolveUrl (./node_modules/vite-node/dist/client.mjs:207:18)\n' +
  '    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)\n' +
  'at async ViteNodeRunner.resolveUrl (./node_modules/vite-node/dist/client.mjs:232:11)\n' +
  'at async request (./node_modules/vite-node/dist/client.mjs:260:28)\n' +
  'at async ./app/app.vue:6:31)\n' +
  'at async ViteNodeRunner.runModule (./node_modules/vite-node/dist/client.mjs:397:4)\n' +
  'at async ViteNodeRunner.directRequest (/home/patrick/test/'... 382 more characters,
  message: "Cannot find module '~/public/favicon.ico' imported from 
  './app/app.vue'.\n" +
  
  '\n' +
  
  - If you rely on tsconfig.json's "paths" to resolve modules, please 
  install "vite-tsconfig-paths" plugin to handle module resolution.\n +
  
  "- Make sure you don't have relative aliases in your Vitest config. 
  Use absolute paths instead. Read more: 
  https://vitest.dev/guide/common-errors",
  code: 'ERR_MODULE_NOT_FOUND',
  [Symbol(vitest.error.not_found.data)]: {
    id: '~/public/favicon.ico',
    importer: './app/app.vue',
  },
}
```

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Images Not displayed in V4 #32657

Environment

Reproduction

Describe the bug

Additional context

Logs

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Uh oh!

Images Not displayed in V4 #32657

Description

Environment

Reproduction

Describe the bug

Additional context

Logs

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions