files in the public directory are served at the root path.

[nicitaacom]

I want use autocomplete for all images (over 100)
and it will pain do it without autocomplete
I don't get autocomplete with ./
I got autocomplete with / path

    <img className='navbar-logo' src="/public/pages/home/logo.png"/>

I got this warning

files in the public directory are served at the root path.
Instead of /public/pages/home/logo.png, use /pages/home/logo.png.

1. How do I disable this?
2. For what do I need use ./?

[elaiya15]

public folder is not necessary

your code is : /public/pages/home/logo.png, ( but ) vite.js is recomented this : /pages/home/logo.png.

[nicitaacom]

ok but I got no autocomplete in case when I write /pages/home/logo.png

[kimchristiansen]

You could try to add an resolve.alias to the publicDir in your vite.config file.

[nicitaacom]

can you share some example please?

[kimchristiansen]

Sure. In your vite config file add the following:
resolve: { alias: [ { find: '@public', replacement: fileURLToPath(new URL('public/', import.meta.url)) } ] },

In your html you can write the following:

<img className='navbar-logo' src="@public/pages/home/logo.png"/>

You could also create a direct alias to your home folder.
This stackoverflow have good comments about resolve.alias: https://stackoverflow.com/questions/66043612/vue3-vite-project-alias-src-to-not-working

I hope i could help.

[nicitaacom]

It doesn't work for me

vite-src-autocomplete.mp4

[s3xysteak]

I do not think resolve.alias can work on DOM. Vite Document said the option will be passed to @rollup/plugin-alias. And @rollup/plugin-alias only works when module import.

// Path will be transformed.
+ import json from '@/hi.json'

// Will not work. The request will be sent to `@/hi.json`.
- fetch(@/hi.json).then(res => res.json()) 

// Will not work. The request will be sent to `@/logo.svg`.
- <img src="@/logo.svg" />

To make alias work in Vite, explicit import the path:

import logo from '@public/logo.png'
// import logo from '@public/logo.png?url' // It can work correctly too.

In HTML:

<img src="${logo}" />

Vue:

<template>
  <img :src="logo" />
<template/>

React:

<img src={logo} />

Refer to https://vitejs.dev/guide/assets.html#explicit-url-imports

[nicitaacom]

I just want to get autocomplete

Please describe in which file should I paste import logo from '@public/logo.png'

Also which steps helps me get autocomplete when I write src for image?

[s3xysteak]

Configurate options.resolve.alias in vite.config.ts:

import { defineConfig } from 'vite';

export default defineConfig({
  resolve: {
    alias: {
      '@public': ''
    }
  }
})

It intends to let Vite know about this alias.

Because files in public will be copied to root folder after building, so it should be like import Logo from '/logo.svg' instead of import Logo from '/public/logo.svg'. With the configuration, @public/logo.svg is equal to /logo.svg because @public is equal to a empty string.

Since then, you can find out the alias worked but no autocomplete provided.

Configurate paths in tsconfig.json or jsconfig.json:

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@public/*": ["public/*"],
    },
    // ...
  },
  // ...
}

It makes vscode know that the @public/* points to /public/*. Since then, you should have the intellisense.

Usage

Use in any JS context.

import Logo from '@public/logo.svg'
document.querySelector('#app').innerHTML = `
  <img src="${Logo}" />
`

<script setup>
import Logo from '@public/logo.svg'
</script>

<template>
  <img :src="Logo" />
</template>

import Logo from '@public/logo.svg'
export default function MyApp() {
  return (
    <img src={Logo} />
  );
}

[nicitaacom]

This way it not common and comfortable
But anyways I'm still getting no autocomplete

f813c1f6-555a-4a39-81f8-65562e9c9356.mp4

[s3xysteak]

This approach works for me. IntelliSense is actually a feature of TypeScript + VSCode. You may want to check your TypeScript, VSCode, and Node.js versions, as this could be the reason for the lack of IntelliSense.

Apart from that, This is indeed one of the drawbacks of Vite. During the webpack + commonjs era, this issue could be addressed using require(), but with Vite fully embracing ESM, this workaround is no longer viable.

[s3xysteak]

I just figured out how that happened. According to your video, obviously, TypeScript recognizes alias but cannot identify files. This is because most static files (such as .png) are not considered part of the code.

There are two solutions:

1. Manually define the types of static files.

// statics.d.ts
declare module '*.png' {
  const src: string
  export default src
}

2. In fact, Vite has provided this type file.

// vite-env.d.ts

/// <reference types="vite/client" />

Do not forget to include it in tsconfig.json.

[s3xysteak]

The simplest way is just edit the tsconfig.json:

{
  "compilerOptions": {
    "paths": {
      "/*": ["./*", "./public/*"],
    },
    // ...
  },
}

No need to set alias.

import Logo from '/logo.svg' // IntelliSense 

document.querySelector('#app').innerHTML = `
  <img src="${Logo}" />
`

This can sometimes cause ambiguity, so I rarely do it.

[nicitaacom]

Thank you this solution work for me

tsconfig.json

 "paths": {
      "/*": ["./*", "./public/*"]
    }

vite.config.ts

import { defineConfig } from "vite"

export default defineConfig({})

[Vignesh12334]

I'm building a project usign Vite and React. While building my project, suddenly my local host became a white screen and showed this in my terminal.

Files in the public directory are served at the root path.
Instead of /public/assets/images/apple.svg, use /assets/images/apple.svg.

[alephpt]

if anyone else runs into this, adding __dirname to resolve fixed this for me.

 resolve: { alias: { '@': resolve(__dirname, 'src'), '$lib': resolve(__dirname, "/src/lib") } },