microsoft / microsoft/vscode-livepreview
images doesn't load when i use live preview in a vite project
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 596
- Forks
- 119
- Avg merge
- 1d 4m
- Merged PRs (30d)
- 5
Description
I'm working on a Tailwind-only site, and the images load correctly. However, when I migrate to Vite and use Live Preview, the images loaded within the Tailwind classes aren't displaying. I've tried several ways to resolve this, but nothing works. However, when I run npm run dev and build, they do display correctly.
This works fine with live preview (vite project):
<a href="#" class="nav-logo"><p class="pt-3">Some Text</p><img class="w-[40px] h-auto" src="img/gif/duckling.gif" alt="" /></a>
This doesnt load with live preview (vite project)
<header class="text-center py-4 w-[1240px] h-[300px] mx-auto bg-[url('/img/png/bg-header.png')] bg-cover bg-center overflow-hidden flex justify-center items-center">
What could this be due to?
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the issue in a Vite project using the provided header markup and the referenced /img/png/bg-header.png path. Compare Live Preview with npm run dev and build; done means the Tailwind background image loads in Live Preview as it does in the other modes.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- tailwindcss, vite
- Domain
- devtools, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 32/100