我的背景图片没有显示在 github 页面中(tailwind css)

问题描述 投票:0回答:2

我用 html 和 taiwind css 制作了一个特斯拉克隆。它在我的实时服务器上运行良好,但是在将它部署到 github 页面时图像不显示。

项目如下: https://github.com/Manikkk3/Tesla-clone-repository

我尝试更改 (./images/...) 和 (/images/..) 但它在 tailwind.config.js 上不起作用

我尝试更改 (./images/...) 和 (/images/..) 但它在 tailwind.config.js 上不起作用 我想显示背景图片。

html css tailwind-css
2个回答
0
投票

尝试在 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: [],
}

0
投票

我不确定你是否找到了解决这个问题的方法。我最近遇到了同样的问题,经过大量搜索后,我在 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: [],
}

© www.soinside.com 2019 - 2024. All rights reserved.