背景图像在 github 页面上不起作用

Question

我正在尝试在 Github 页面上托管我的作品集网站，但背景图像未加载。我加载了所有其他图像，并尝试了以下作为我的背景图像。

当我检查元素时 我收到的错误是

获取https://kabirthakur.github.io/assets/herobg-ecbfddc8.png 404.index-a71a2bc8.css:1

CSS 文件给出了背景图像的正确名称和位置

    .bg-hero-pattern {     background-image: url(/assets/herobg-ecbfddc8.png)

链接到 GitHub 页面 - https://kabirthakur.github.io/portfolio 链接到 GitHub 存储库 - https://github.com/kabirthakur/portfolio

在 tailwind.config.js 中，我在反斜杠后面添加了“..”

    backgroundImage: {           "hero-pattern": "url('../src/assets/herobg.png')",         }

     .bg-hero-pattern {     background-image: url(/assets/herobg-ecbfddc8.png)

我尝试添加“.”仍然出现 404 错误

     .bg-hero-pattern {     background-image: url(./src/assets/herobg.png) }

Answer 1

您可以从命令行在您的存储库目录中执行

npm run build

，您将获得以下输出：

> [email protected] build
> vite build

vite v4.4.7 building for production...
transforming (22) src/components/Tech.jsx
./src/assets/herobg.png referenced in /tmp/portfolio/src/index.css didn't resolve at build time, it will remain unchanged to be resolved at runtime
✓ 391 modules transformed.
dist/index.html                                 0.46 kB │ gzip:   0.30 kB
dist/assets/threejs-1d0654a8.svg                0.69 kB │ gzip:   0.38 kB
dist/assets/menu-242d80a8.svg                   1.09 kB │ gzip:   0.45 kB
dist/assets/close-ad0e0ca6.svg                  1.34 kB │ gzip:   0.55 kB
dist/assets/reactjs-966214a8.png                4.10 kB
dist/assets/figma-184a11e6.png                  4.75 kB
dist/assets/tesla-4c857950.png                  4.95 kB
dist/assets/tailwind-6ece120d.png               5.24 kB
dist/assets/html-92b76a73.png                   5.32 kB
dist/assets/css-79a7f026.png                    5.48 kB
dist/assets/docker-602a695a.png                 5.49 kB
dist/assets/nodejs-d83eb6dd.png                 6.60 kB
dist/assets/meta-e386841a.png                   7.75 kB
dist/assets/redux-171787ca.png                  7.77 kB
dist/assets/shopify-c0fdbc80.png                8.00 kB
dist/assets/mongodb-54000b2b.png                8.05 kB
dist/assets/logo-21cdd1c2.svg                   8.87 kB │ gzip:   2.66 kB
dist/assets/github-3b4e1609.png                11.07 kB
dist/assets/starbucks-af2a76fc.png             16.75 kB
dist/assets/creator-dbbffaec.png               21.77 kB
dist/assets/figure_1-5e9e19fc.png              42.75 kB
dist/assets/model-e026b916.png                 58.61 kB
dist/assets/banking-d06acd83.png               87.61 kB
dist/assets/mobile-35b7b780.png               118.14 kB
dist/assets/spam-e6ea50c8.png                 148.54 kB
dist/assets/web-483fa5df.png                  152.26 kB
dist/assets/hmo-5412eaab.png                  265.83 kB
dist/assets/cusine_cluster-6f55795a.png       315.24 kB
dist/assets/comp_phy-f719be01.png             354.25 kB
dist/assets/figure_2-b3f59baa.png             381.39 kB
dist/assets/supermarket_sales-2926486d.png    501.76 kB
dist/assets/jobit-ecb9d39c.png                755.05 kB
dist/assets/carrent-aba013d1.png              758.93 kB
dist/assets/tripguide-892dd3b1.png          3,417.51 kB
dist/assets/index-89bb6ba4.css                 13.85 kB │ gzip:   3.78 kB
dist/assets/index-59747569.js                 490.58 kB │ gzip: 153.19 kB
✓ built in 2.71s

请注意这一行。

./src/assets/herobg.png referenced in /tmp/portfolio/src/index.css didn't resolve at build time, it will remain unchanged to be resolved at runtime

在

herobg

中定义的对

tailwind.config.cjs

的图像引用被顺风转换为

src/index.css

，因此我们应该使用

./assets/herobg.png

来引用图像。

解决问题后，herobg 被复制到输出：

❯ ls dist/assets/ | grep hero
herobg-ecbfddc8.png

顺便说一句，最好将

dist

和

node_modules

添加到 .gitignore，因为它们可以从

npm run build

和

npm install

生成。将这些生成的大型文件夹添加到您的 git 存储库会减慢 git 操作。