我用 html 和 taiwind css 制作了一个特斯拉克隆。它在我的实时服务器上运行良好,但是在将它部署到 github 页面时图像不显示。
项目如下: https://github.com/Manikkk3/Tesla-clone-repository
我尝试更改 (./images/...) 和 (/images/..) 但它在 tailwind.config.js 上不起作用
我尝试更改 (./images/...) 和 (/images/..) 但它在 tailwind.config.js 上不起作用 我想显示背景图片。
尝试在 tailwind.config.js 文件中为您的图像使用直接 URL 路径
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./*.html'],
theme: {
screens: {
sm: '480px',
md: '768px',
lg: '976px',
ll: '1177px',
xl: '1440px',
},
extend: {
backgroundImage: {
Model3: "url('/images/model-3.jpg')",
ModelY: "url('/images/model-y.jpg')",
ModelS: "url('/images/model-s.jpg')",
ModelX: "url('/images/model-x.jpg')",
SolarPanels: "url('/images/solarpanels.jpg')",
SolarRoof: "url('/images/roof.jpg')",
Accessories: "url('/images/accessories.jpg')",
},
},
},
plugins: [],
}
我不确定你是否找到了解决这个问题的方法。我最近遇到了同样的问题,经过大量搜索后,我在 link 中找到了解决方案。所以我在这里为可能遇到类似问题的任何人添加答案。
基本上我们需要添加
url
相对于css文件的路径(生成后)。与tailwind.config.js
文件无关。
所以如果 css 文件像
build/css/main.css
一样在构建目录中并且图像是这样的:build/images/model-3.jpg
那么 url 中的路径将是:
"url('../images/model-3.jpg')"
tailwind.config.js
文件将是:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./*.html'],
theme: {
extend: {
backgroundImage: theme => ({
'Model3': "url('../images/model-3.jpg')",
'ModelY': "url('../images/model-y.jpg')",
'ModelS': "url('../images/model-s.jpg')"
}),
},
},
plugins: [],
}