QImg src="/foo.jpg" in public folder (app-vite-v2.0.0-beta.1)

[jaybo]

What happened?

1. Upgraded to @quasar/app-vite-v2.0.0-beta.1
2. Build and deploy test production version everything works (YEAH!!!).
3. But, only when using quasar dev -m pwa or quasar dev -m spa QImg with src="/foo.jpg" content fails to load (src="/foo.png" works fine).

Before upgrade:

src="/foo.png" # worked
src="/foo.jpg" # worked

After upgrade:

src="/foo.png" # still works
src="/foo.jpg" # *no image*
... but
src="foo.jpg" # works

After upgrade, just removing the leading slash fixes it.
(Frankly I've never been clear regarding the correct syntax when referencing public folder files).

What did you expect to happen?

Existing code doesn't break on upgrade.

Couldn't repro on stackblitz, since I was unable to save a project with images in the public folder.

Reproduction URL

https://stackblitz.com/edit/quasarframework-thsqqq?file=src%2Fpages%2FIndexPage.vue

How to reproduce?

Doesn't repro on StackBlitz... Hmm.

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

SPA Mode

Platforms/Browsers

Chrome, Microsoft Edge

Quasar info output

(base) d:\devGit\dzweb\ClientApp>quasar info command

Operating System - Windows_NT(10.0.22621) - win32/x64
NodeJs - 18.19.0

Global packages
  NPM - 10.2.5
  yarn - 1.22.21
  @quasar/cli - 2.3.0
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.14.3 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 2.0.0-beta.1 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.9 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.4.15 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.2.5
  pinia - 2.1.7 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  vite - 5.1.1 -- Native-ESM powered web dev build tool
  esbuild - 0.20.0 -- An extremely fast JavaScript and CSS bundler and minifier.
  eslint - 8.56.0 -- An AST-based pattern checker for JavaScript.
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Networking
  Host - nomad-5
  Ethernet - 192.168.0.96

Relevant log output

» Reported at............ 2/9/2024 10:46:46 AM
 » App dir................ d:\devGit\dzweb\ClientApp
 » App URL................ https://192.168.0.96:44346/
                           https://localhost:44346/
 » Dev mode............... pwa
 » Pkg quasar............. v2.14.3
 » Pkg @quasar/app-vite... v2.0.0-beta.1
 » Browser target......... es2019|edge88|firefox78|chrome87|safari13.1

11:16:57 AM [vite] Internal server error: Failed to resolve import "./XannieKayak.jpg" from "src\components\Demo.vue". Does the file exist?
  Plugin: vite:import-analysis
  File: D:/devGit/dzweb/ClientApp/src/components/Demo.vue:773:55
  267|  };
  268|  import { createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, normalizeClass as _normalizeClass, withCtx as _withCtx, createElementVNode as _createElementVNode, createTextVNode as _createTextVNode, openBlock as _openBlock, createBlock as _createBlock, resolveDirective as _resolveDirective, withDirectives as _withDirectives, createElementBlock as _createElementBlock, renderList as _renderList, Fragment as _Fragment, toDisplayString as _toDisplayString, normalizeStyle as _normalizeStyle, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
  269|  import _imports_0 from "./XannieKayak.jpg";
     |                          ^
  270|  const _withScopeId = (n) => (_pushScopeId("data-v-b0b1deea"), n = n(), _popScopeId(), n);
  271|  const _hoisted_1 = {
      at formatError (file:///d:/devGit/dzweb/ClientApp/node_modules/vite/dist/node/chunks/dep-94_H5fT6.js:50510:46)
      at TransformContext.error (file:///d:/devGit/dzweb/ClientApp/node_modules/vite/dist/node/chunks/dep-94_H5fT6.js:50504:19)
      at normalizeUrl (file:///d:/devGit/dzweb/ClientApp/node_modules/vite/dist/node/chunks/dep-94_H5fT6.js:65561:33)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async file:///d:/devGit/dzweb/ClientApp/node_modules/vite/dist/node/chunks/dep-94_H5fT6.js:65716:47
      at async Promise.all (index 5)
      at async TransformContext.transform (file:///d:/devGit/dzweb/ClientApp/node_modules/vite/dist/node/chunks/dep-94_H5fT6.js:65637:13)
      at async Object.transform (file:///d:/devGit/dzweb/ClientApp/node_modules/vite/dist/node/chunks/dep-94_H5fT6.js:50819:30)
      at async loadAndTransform (file:///d:/devGit/dzweb/ClientApp/node_modules/vite/dist/node/chunks/dep-94_H5fT6.js:53592:29)
      at async viteTransformMiddleware (file:///d:/devGit/dzweb/ClientApp/node_modules/vite/dist/node/chunks/dep-94_H5fT6.js:63376:32)

Additional context

No response

[rstoenescu]

Hi,

There is something in the bug report that doesn't sits well with me:

src="/foo.png" # still works
src="/foo.jpg" # *no image*

It's impossible for one to work while the other to not work. Please take a closer look at the files in your /public folder pls. Is there some typo somewhere? Otherwise it really makes no sense.

[jaybo]

Yup, you're right. Previously, running on Windows, image names were case insensitive (and still are case insensitive in production on Windows), but in development with Vite, the case must match. Closing.

BTW. Just wanted to express how damned fast development is with the new Vite changes and a large project. Bliss! Thanks!