我正在执行Frontend Mentor challenge，在将项目发布到Vercel时遇到了问题。
无法加载背景图像。所有内容在我的本地计算机上都可以正常工作，但在部署后，唯一无法加载的图像是该背景图像。
1.我使用的是Vite构建工具React和TailwindCSS。
1.图片路径为**./public/images/bg-mobile.svg**
1.我在我的tailwind.config.cjs中导入了该图像，并将其用作tailwin“bg-”类。
如果有人知道我做错了什么，我会很高兴知道的。
//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条答案
按热度按时间vwkv1x7d1#
使用的相对路径错误。
./这样就意味着向上一个层次。但是根据你的问题
./public/images/bg-mobile.svg因此，尝试将
./替换为/，它应该可以工作。最终代码：
yshpjwxd2#