第一步：检查图片路径问题（最常见的原因）
这是导致图片不显示的 首要原因，CSS中的图片路径（background-image 或 img标签的src）必须是相对于CSS文件本身的位置，或者是网站的绝对路径。
相对路径错误
假设你的网站结构如下：
/your_site/
├── /templets/
│ └── /default/ <-- 你的模板文件夹
│ ├── style.css <-- 你的CSS文件
│ ├── images/ <-- 图片文件夹
│ │ ├── logo.png
│ │ └── bg.jpg
│ └── index.htm <-- 你的模板文件
└── /uploads/ <-- DedeCMS默认上传目录
└── image/...错误示例：
在 style.css 中，你这样写背景图片：
.header {
background-image: url('images/logo.png'); /* 错误！如果CSS和HTML不在同一目录 */
}
style.css 是通过 <link> 标签在 index.htm 中引入的，那么浏览器会从 index.htm 所在的目录（即 /templets/default/）去寻找 images/logo.png，这是正确的，但如果你的CSS文件在别的地方，或者你的HTML结构嵌套很深，相对路径就会出错。
正确做法： 使用 绝对路径，绝对路径可以避免所有相对路径的混乱问题。
-
使用DedeCMS的全局变量 DedeCMS提供了
{dede:global.cfg_basehost/}变量来获取你的网站域名，这是最推荐的方法。/* 在你的style.css中 */ .header { background-image: url("{dede:global.cfg_basehost/}/templets/default/images/logo.png"); } -
使用根目录路径 以 开头的路径表示从网站根目录开始查找。
/* 在你的style.css中 */ .header { background-image: url("/templets/default/images/logo.png"); } -
使用DedeCMS的模板标签（推荐） 最佳实践是不要在CSS文件里写死路径，而是在HTML模板文件中通过
<style>标签动态生成CSS。修改你的
index.htm文件：
（图片来源网络，侵删）<head> <meta charset="UTF-8"> <title>{dede:field.title/}_{dede:global.cfg_webname/}</title> <!-- 其他 meta 标签... --> <link rel="stylesheet" href="{dede:global.cfg_templets_skin/}/style.css"> <!-- 在这里动态注入你的自定义CSS --> <style type="text/css"> .header { background-image: url("{dede:global.cfg_templets_skin/}/images/logo.png"); } </style> </head>这里
{dede:global.cfg_templets_skin/}会自动解析为/templets/default/。
图片文件本身不存在或路径错误
- 检查文件是否存在：通过FTP或服务器的文件管理器，确认图片文件是否真的存在于你指定的路径下。
- 检查文件名大小写：Linux服务器（大多数虚拟主机都是）对文件名大小写敏感。
Image.jpg和image.jpg是两个不同的文件，确保CSS中写的文件名和实际文件名完全一致（包括大小写）。
第二步：检查缓存问题
浏览器、服务器和DedeCMS自身都会缓存文件，导致修改后看不到效果。
浏览器缓存
这是最常见的问题之一。
- 强制刷新浏览器：
- Windows/Linux:
Ctrl + F5或Ctrl + Shift + R - Mac:
Cmd + Shift + R
- Windows/Linux:
- 打开无痕/隐私模式进行访问，这样可以排除所有本地缓存。
- 使用开发者工具（按F12）：
- 在
Network(网络) 标签页中，找到对应的图片请求。 - 右键点击,选择
Disable cache(禁用缓存)，然后刷新页面。
- 在
DedeCMS模板缓存
DedeCMS为了提高速度,会编译模板文件并生成缓存。
- 更新系统缓存：
- 登录你的DedeCMS后台。
- 进入 “系统” -> “系统基本参数” -> “性能选项”。
- 点击右上角的 “更新系统缓存” 按钮。
- 清理完毕后,刷新前台页面。
服务器/CDN缓存
如果你使用的是云服务器或CDN服务,它们也可能有缓存。
- 服务器缓存：如果你开启了服务器（如Nginx或Apache）的静态文件缓存，需要清除对应目录的缓存。
- CDN缓存：如果你使用了CDN（如阿里云CDN、腾讯云CDN、Cloudflare），需要登录到CDN控制台，对图片的URL进行“刷新缓存”或“刷新目录”操作。
第三步：检查文件权限问题
图片文件无法被Web服务器读取,也会导致不显示。
- 检查文件权限：通过FTP工具，右键点击图片文件，查看其权限，图片文件的权限应设置为 644（所有者可读写，组用户和其他用户只读）。
- 检查文件夹权限：存放图片的文件夹权限应设置为 755（所有者可读、写、执行，组用户和其他用户可读、执行），确保Web服务器用户（通常是
www-data或nginx）有权限进入该文件夹并读取文件。
第四步：检查代码和语法错误
CSS语法错误
CSS中的一个错误（如缺少分号、括号不匹配）可能会导致其后的所有规则失效，包括背景图片。
- 使用CSS验证工具：将你的CSS代码粘贴到 W3C CSS Validator 中进行检查，看是否有语法错误。
- 使用浏览器开发者工具：
- 按F12打开开发者工具。
- 切换到
Elements(元素) 标签页。 - 找到对应不显示图片的HTML元素。
- 在右侧的
Styles(样式) 面板中，查看应用的CSS规则。 - 如果路径旁边有红色删除线,表示该规则被忽略，通常是语法错误或路径错误。
- 如果路径没有错误,但图片上有个小图标，将鼠标悬停在上面会显示具体的错误信息（如404 Not Found）。
图片路径被动态内容干扰
模板引擎（如Dede标签）的输出可能会被空格等字符干扰，导致路径不正确。
-
确保标签纯净：在模板标签前后不要有多余的空格或换行。
<!-- 错误：标签前后可能有空格 --> <img src=" {dede:field.litpic/} " alt=""> <!-- 正确：标签紧贴引号 --> <img src="{dede:field.litpic/}" alt="">
第五步：检查服务器配置和.htaccess文件
图片MIME类型错误
服务器没有正确配置图片文件的MIME类型,可能导致浏览器无法识别。
- 检查.htaccess文件：如果你的网站根目录下有
.htaccess文件，检查其中是否有错误的重写规则阻止了图片的访问，可以尝试将其重命名（如.htaccess_old）后刷新页面，看是否恢复正常。
图片文件损坏
虽然少见,但图片文件本身在传输或上传过程中损坏，也会导致无法显示。
- 重新上传图片：尝试用FTP重新上传一张正常的图片，替换掉原来的文件，看问题是否解决。
排查清单
当你遇到CSS图片不显示的问题时,请按以下顺序检查：
- [ ] 检查图片路径：将CSS中的相对路径改为绝对路径（使用
{dede:global.cfg_basehost/}或 开头）。 - [ ] 强制刷新浏览器：使用
Ctrl + F5或在无痕模式下访问。 - [ ] 清理DedeCMS缓存：在后台点击“更新系统缓存”。
- [ ] 检查文件是否存在：通过FTP确认图片文件在正确路径下，且文件名大小写正确。
- [ ] 检查文件权限：确保图片文件权限为644，文件夹权限为755。
- [ ] 使用浏览器开发者工具：检查Network网络请求（是否404）和Styles样式面板（是否有语法错误）。
- [ ] 检查CSS语法：确保CSS代码没有错误。
- [ ] 检查服务器和.htaccess：尝试重命名
.htaccess文件或联系主机商。
按照这个流程,99%的CSS图片不显示问题都可以被解决，祝你顺利！
