TailwindCSS - 背景图片未在构建时加载
[英]TailwindCSS - background image not loading on build
问题描述
I'm doing a Frontend Mentor challenge and I've ran into a problem when publishing my project to Vercel.
我正在做一个前端导师挑战，我在将我的项目发布到 Vercel 时遇到了问题。
The background image can't load.无法加载背景图像。 Everything works on my local machine, but when deployed, the only image that doesn't load is that background image.一切都在我的本地机器上运行，但在部署时，唯一不加载的图像是背景图像。
- I'm using the Vite buildtool, React and TailwindCSS.我正在使用 Vite 构建工具、React 和 TailwindCSS。
- The image path is ./public/images/bg-mobile.svg图片路径为./public/images/bg-mobile.svg
- I imported the image in my tailwind.config.cjs and use it as a tailwin "bg-" class.我将图像导入到我的tailwind.config.cjs中并将其用作 tailwin“bg-”class。
If anyone knows what I'm doing wrong, I'd be really happy to know.如果有人知道我做错了什么，我会很高兴知道。
//tailwind.config.cjs
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {
colors: {
"huddle-violet": "hsl(257, 40%, 49%)",
"huddle-magenta": "hsl(300, 69%, 71%)",
},
backgroundImage: {
"desktop": "url('./images/bg-desktop.svg')",
"mobile": "url('./images/bg-mobile.svg')"
},
},
},
plugins: [require('prettier-plugin-tailwindcss')],
};
//index.html
<body class="bg-huddle-violet bg-mobile bg-contain bg-no-repeat">
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
2 个解决方案
解决方案1
1 2023-01-16 11:14:04
The relative path being used is wrong.使用的相对路径是错误的。
./ with this you mean one heirarchy up. ./有了这个，你的意思是一个层次结构。
But according to your question ./public/images/bg-mobile.svg但是根据你的问题./public/images/bg-mobile.svg
So try replacing ./ with / it should work.因此，请尝试将./替换为/它应该可以工作。
Final code:最终代码：
backgroundImage: {
"desktop": "url('/images/bg-desktop.svg')",
"mobile": "url('/images/bg-mobile.svg')"
},
解决方案2
0 已采纳 2023-01-15 16:57:20
backgroundImage: { "desktop": "url('/images/bg-desktop.svg')", "mobile": "url('/images/bg-mobile.svg')" },
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.