关于css引用文件路径问题

[weepelf0]

老师，又来请教静态文件相关问题。 目前框架信息： 1.Django 版本3.0.1； 2.使用static方法管理静态文件，大部分页面可以正确加载； 问题描述： 部分页面使用css引用图片文件时，web前段html中无法正确加载， 问题应该是在css中关于文件路径的写法上。

html前端片段：

省略其他代码

#省略其他代码 index.css文件片段： .business_area .slide_list .li1{ background: ｛% static ‘对应文件路径’%｝ no-repeat top;background-size: cover; } .business_area .slide_list .li2{ background: url(../img/sections/section-2.jpg) no-repeat top;background-size: cover; } .business_area .slide_list .li3{ background: url(../img/sections/section-11.jpg) no-repeat top;background-size: cover; } 这种情况下引用文件无法正确加载，请教老师css中如何正确描述这种图片文件路径？ 还是说只能全部写html前端文件里面用｛% static ‘文件路径’%｝来引用呢？ 

MaoningGuan commented 4 years ago

用｛% static ‘文件路径’%｝来引用

weepelf0 commented 4 years ago

老师再次麻烦您， 在index.css文件中， 1.尝试了在首行添加或删除{% load static %}; 2.尝试了url｛% static ‘文件路径’%｝或没有url，直接｛% static ‘文件路径’%｝，或者把{}替换为()｜[]； 都无法正确加载，还请老师有空在帮忙看一下， 感激不尽！

MaoningGuan commented 4 years ago

可以尝试使用相对路径，即相对于css文件所在的文件夹。 你下面这两个引用能够正常工作吗？

weepelf0 commented 4 years ago

.business_area .slide_list .li3{ background: url(../img/sections/4-3bsn-entr.jpg) no-repeat top;background-size: cover; } 按照这个相对路径的写法，图片没有被正确加载，在浏览器调试模式中检查了Network-img列表中，没有加载图片； 老师我的想法是这样的： 如果可以在css中使用正确的方法引用文件当然最好， 如果css不支持包含｛% static ‘文件路径’%｝内容的写法（因为vscode一直在提示报错），我就改写到html，每个页面都写一次来解决。

MaoningGuan commented 4 years ago

.business_area .slide_list .li3{ background: url("../img/sections/4-3bsn-entr.jpg") no-repeat top;background-size: cover;} 这里的路径要用引号括起来： url("../img/sections/4-3bsn-entr.jpg")

weepelf0 commented 4 years ago

.business_area .slide_list .li1{ background: url("../admin/img/kino_image/4-1bsn-product.jpeg") no-repeat top;background-size: cover; } .business_area .slide_list .li2{ background: url("../admin/img/kino_image/4-2bsn-bsn.jpeg") no-repeat top;background-size: cover; } .business_area .slide_list .li3{ background: url("../admin/img/kino_image/4-3bsn-entr.jpg") no-repeat top;background-size: cover; } 老师，真不好意思，耽误您这么多时间，我按照上面的方式重写了路径，如图所示，img列表里面没有正确加载到我引用的文件，在麻烦您看看，我是不是还有那里有问题，或者再给您提供哪些信息方便参考？

MaoningGuan commented 4 years ago

这里面为什么有些图片可以成功加载，有些没有加载成功，4-1bsn-product.jpeg这些图片没有进行加载。 看看这些图片的引用有什么区别。

weepelf0 commented 4 years ago

拜谢老师！！！！！！！！解决了！！！ 确实有很多指的关注的细节我没有注意到，顺着您的思路，找到了被正确加载的css文件， 事实证明相对路径是可以正确使用的，是因为我安排css路径的时候使用了错误路径，保存了命名重复的文件导致的（我的项目中保在不同路径保存了2个命名为index.css的文件，所以url（../相对路径/文件名）这个是正确且有效的， 再次感谢老师！！

MaoningGuan commented 4 years ago

好的

• © Githubissues.
• Githubissues is a development platform for aggregating issues.

[MaoningGuan]

用｛% static ‘文件路径’%｝来引用

[weepelf0]

老师再次麻烦您， 在index.css文件中， 1.尝试了在首行添加或删除{% load static %}; 2.尝试了url｛% static ‘文件路径’%｝或没有url，直接｛% static ‘文件路径’%｝，或者把{}替换为()｜[]； 都无法正确加载，还请老师有空在帮忙看一下， 感激不尽！

[MaoningGuan]

可以尝试使用相对路径，即相对于css文件所在的文件夹。 你下面这两个引用能够正常工作吗？

[weepelf0]

.business_area .slide_list .li3{ background: url(../img/sections/4-3bsn-entr.jpg) no-repeat top;background-size: cover; } 按照这个相对路径的写法，图片没有被正确加载，在浏览器调试模式中检查了Network-img列表中，没有加载图片； 老师我的想法是这样的： 如果可以在css中使用正确的方法引用文件当然最好， 如果css不支持包含｛% static ‘文件路径’%｝内容的写法（因为vscode一直在提示报错），我就改写到html，每个页面都写一次来解决。

[MaoningGuan]

.business_area .slide_list .li3{ background: url("../img/sections/4-3bsn-entr.jpg") no-repeat top;background-size: cover;} 这里的路径要用引号括起来： url("../img/sections/4-3bsn-entr.jpg")

[weepelf0]

.business_area .slide_list .li1{ background: url("../admin/img/kino_image/4-1bsn-product.jpeg") no-repeat top;background-size: cover; } .business_area .slide_list .li2{ background: url("../admin/img/kino_image/4-2bsn-bsn.jpeg") no-repeat top;background-size: cover; } .business_area .slide_list .li3{ background: url("../admin/img/kino_image/4-3bsn-entr.jpg") no-repeat top;background-size: cover; } 老师，真不好意思，耽误您这么多时间，我按照上面的方式重写了路径，如图所示，img列表里面没有正确加载到我引用的文件，在麻烦您看看，我是不是还有那里有问题，或者再给您提供哪些信息方便参考？

[MaoningGuan]

这里面为什么有些图片可以成功加载，有些没有加载成功，4-1bsn-product.jpeg这些图片没有进行加载。 看看这些图片的引用有什么区别。

[weepelf0]

拜谢老师！！！！！！！！解决了！！！ 确实有很多指的关注的细节我没有注意到，顺着您的思路，找到了被正确加载的css文件， 事实证明相对路径是可以正确使用的，是因为我安排css路径的时候使用了错误路径，保存了命名重复的文件导致的（我的项目中保在不同路径保存了2个命名为index.css的文件，所以url（../相对路径/文件名）这个是正确且有效的， 再次感谢老师！！

[MaoningGuan]

好的