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

disbfnqx  于 2023-08-08  发布在  Git
关注(0)|答案(1)|浏览(138)

我试图在Github页面上托管我的投资组合网站,但背景图像无法加载。我得到了所有其他图像加载,并尝试了以下为我的背景图像。
当我检查元素时,我得到的错误是
404.第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) }

bvuwiixz

bvuwiixz1#

你可以从命令行在你的仓库目录中执行npm run build,你会得到以下输出:

> 3d-portfolio@0.0.0 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
tailwind.config.cjs中定义的herobg的图像引用被顺风转换为src/index.css,因此我们应该使用./assets/herobg.png来引用图像。
解决问题后,herobg将复制到输出:

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


顺便说一句,最好将distnode_modules添加到.gitignore,因为它们可以从npm run buildnpm install生成。将这些大的生成文件夹添加到你的git存储库中会降低git操作的速度。

相关问题