【问题标题】:Tailwindcss background image not showing on deployTailwindcss 背景图像未在部署时显示
【发布时间】:2022-01-03 16:32:00
【问题描述】:

背景图片和导航栏背景都不会渲染。我正在使用 Vercel 和 Netlify 进行部署,并且在两个站点上都使用了 build 命令以及发布目录设置。因为我是第一次使用 Tailwind,所以尝试检查我的代码,但我仍然无法弄清楚出了什么问题?

回购:https://github.com/d4nky/Tailwindcss-Portfolio
网站:https://inspiring-carson-2c8f1d.netlify.app

任何信息都将不胜感激:)

【问题讨论】:

    标签: javascript html css tailwind-css


    【解决方案1】:

    您也必须将 img 目录放在您的 dist 中,因为目前,您使用的路径 /img/background.jpg 指的是 repo /dist/img/background.jpg 文件,它不存在。

    你可以在控制台中查看,上面写着:

    GET https://inspiring-carson-2c8f1d.netlify.app/img/background.jpg [HTTP/1.1 404 Not Found]
    

    logo_size.jpg 也是如此。

    您可以手动将这些目录直接放入 dist 目录,或者使用一些捆绑工具(例如 webpack)来自动化。

    【讨论】:

      【解决方案2】:

      因为网站找不到资源。

      您在 index.html 中指定的链接是相对链接,其绝对路径为path/to/index/ + value/of/src。例如,您的页面实际上会在 repo-root/dist/dist/ 中查找 main.js。

      因此,您应该正确存储和链接您的资源,或者学习使用捆绑技术,例如网页包。

      【讨论】:

        猜你喜欢
        • 2021-11-26
        • 1970-01-01
        • 2018-04-02
        • 2021-02-20
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多