我试图在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) }
型
1条答案
按热度按时间bvuwiixz1#
你可以从命令行在你的仓库目录中执行
npm run build
,你会得到以下输出:字符串
请注意这一行。
./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将复制到输出:
型
顺便说一句,最好将
dist
和node_modules
添加到.gitignore,因为它们可以从npm run build
和npm install
生成。将这些大的生成文件夹添加到你的git存储库中会降低git操作的速度。