我的知识记录

公司网站图片显示不出来_路径与权限排查

图片修改核心:先确定图片是后台管理还是写死在模板。后台管理的图片(CMS如PbootCMS/Dedecms/WordPress/企业建站系统):登录后台→找到对应栏目/页面/设置→图片上传处→删除旧图/上传新图→保存→清缓存→前台刷新确认。写死在模板的图片(HTML里或CSS里background:url()):方法1.FTP替换同名文件(上传新图覆盖旧图,文件名/路径不变,最简单,注意尺寸/格式一致,清浏览器缓存);方法2.改模板代码(改路径或CSS background路径,上传新图到新路径,改代码,适合换尺寸/格式),模板文件通常在/template/或/themes/目录,改完清缓存(CMS缓存/CDN缓存)。图片显示不出来排查:1.路径错(相对路径/绝对路径,F12看Network图片请求404,确认路径和文件存在);2.文件不存在(被删/没上传/文件名大小写,Linux区分大小写);3.权限错(图片文件644/目录755,属主Web服务器,不可读→403);4.域名/CDN问题(图片域名没解析/CDN没回源/HTTPS混合内容(HTTP页面加载HTTPS图片或反过来));5.格式不支持(WebP老浏览器不支持/文件名后缀和实际格式不符);6.防盗链(Referer不在白名单→403,临时关防盗链测试);7.程序错误(图片是动态生成的(验证码/缩略图),程序报错→500,看错误日志)。

图片显示问题排查与图片优化。图片显示不出来完整排查:1.F12开发者工具→Network→Img,看图片请求状态码(404路径错/文件不存在,403权限/防盗链,500程序错,200但不显示是格式/CSS问题,CORS跨域);2.404:确认路径(相对路径在不同页面可能错,用绝对路径/开头),确认文件存在(FTP看路径,文件名大小写(Linux区分),文件没上传/被删),确认域名(图片域名没解析/CDN没配置);3.403:文件权限(644/目录755,属主Web服务器用户,chmod/chown修正),防盗链(Referer白名单没包含当前域名,临时关防盗链测试,Nginx valid_referers配置),目录禁止访问(.htaccess/Nginx deny),SELinux(setenforce 0测试);4.500:动态图片(验证码/缩略图/水印程序)报错,看PHP错误日志,GD库没装/内存不足/路径错;5.200不显示:格式不支持(WebP老浏览器,用兼容),CSS把图片隐藏了(display:none/visibility:hidden/宽高0),图片是0字节(上传失败/损坏,重新上传),混合内容(HTTPS页面加载HTTP图片被浏览器拦截,改HTTPS或协议相对路径//),CORS跨域(字体/图片跨域,Nginx加Access-Control-Allow-Origin);6.部分浏览器不显示:兼容性(WebP/SVG老浏览器,加fallback),广告拦截(广告拦截插件把广告尺寸的图片拦了(如300x250/728x90),改尺寸或路径名不含ad/banner),浏览器扩展(隐私扩展拦图片)。图片优化(速度+SEO):1.尺寸优化(图片实际显示多大就用多大,不要上传4000px大图显示200px(浪费带宽/加载慢),缩略图(CMS自动生成缩略图,列表用缩略图,详情用原图),响应式图片(srcset/sizes,不同屏幕加载不同尺寸,),Retina屏用2倍图但不要过度(3倍图没必要);2.压缩优化(无损压缩TinyPNG/PNGoo(PNG减色),JPEG用Photoshop存为Web所用格式(品质60-80),批量压缩工具(ImageOptim/Trimage/脚本jpegoptim/pngquant),压缩后肉眼看不出差异但体积减50-80%,目标:首屏图片<200KB,列表缩略图<50KB,banner<200KB,产品图<100KB);3.格式优化(WebP(比JPEG/PNG小25-35%,Chrome/Firefox/Edge/Safari14+支持,老浏览器用兼容:,AVIF(更新更小但兼容差,实验性),JPEG XL,PNG用PNG-8(256色,图标/logo),照片用JPEG/WebP,透明用PNG/WebP,图标用SVG(矢量,无限缩放,体积小,可改颜色,适合logo/图标);4.懒加载(图片不在首屏不加载,滚动到可视区才加载,减少首屏请求/带宽,原生loading="lazy"(Chrome76+,),或JS库(lazysizes/vanilla-lazyload,兼容老浏览器,data-src属性),注意首屏图片不要懒加载(影响LCP),banner/首屏图正常加载,列表/产品图/文章配图懒加载;5.CDN加速(图片存CDN/OSS,全球节点缓存,就近访问,速度快,减少源站带宽,阿里云OSS+CDN/七牛/又拍云/腾讯云COS,图片域名CDN,自动WebP/缩略图/水印(CDN图片处理参数,如?x-oss-process=image/resize,w_300/format,webp),CDN缓存规则(图片长期缓存,文件名hash更新);6.HTTP/2+并发(Nginx开HTTP/2,图片多请求并发,提升加载,HTTPS站开http2);7.预加载关键图片(首屏banner/logo用,提前加载,提升LCP);8.Sprite雪碧图(小图标合并成一张图,CSS background-position定位,减少请求数,适合icon小图标,现在用SVG icon字体/内联SVG更灵活);9.图片域名(静态资源用独立域名(static.example.com),并行下载,Cookie-free(图片域名不带Cookie,减少请求头),CDN域名)。图片SEO优化:1.alt标签(描述图片内容

各类图片具体修改方法。Logo修改:1.后台修改(CMS后台→系统设置/网站设置/基本设置→logo上传处→上传新logo→保存→清缓存→前台确认,注意logo尺寸(通常宽200-400px高50-100px,PNG透明背景),有些CMS分PC logo和移动logo,都要换);2.源码替换(FTP到/template/当前模板/images/logo.png,上传新logo覆盖同名文件,清缓存,或改模板header.htm里或硬编码路径,改路径+上传新图);3.注意(logo要SVG或高清PNG,Retina屏用2倍图,favicon单独换,不要用JPG(不支持透明))。Banner轮播图修改:1.后台(CMS后台→轮播图管理/广告管理/首页banner→添加/编辑→上传图片(尺寸通常宽1920px高400-600px,JPG压缩,文件<200KB)→填链接/标题→排序→启用→保存→清缓存→前台确认,轮播图多张按排序显示);2.源码(模板index.htm里轮播图HTML,改路径,或CSS%20background,上传新图到/images/banner/,改代码,清缓存,注意轮播JS(Swiper等)配置);3.注意(banner图尺寸统一(不同尺寸会变形/留白),压缩优化(TinyPNG/Photoshop存Web,<200KB,加载快),加alt标签(SEO),移动端单独banner(响应式或移动专用图,PC大图在手机加载慢))。产品图片修改:1.后台(产品管理→编辑产品→产品图片/缩略图→上传新图(主图+细节图,尺寸统一如800x800,JPG,<100KB)→保存→清缓存,产品列表缩略图自动生成,注意缩略图尺寸(后台设置缩略图尺寸,重新生成));2.源码(产品图存在/upload/或/images/product/,FTP替换同名文件,或改数据库产品表图片字段(phpMyAdmin批量改),注意图片路径存在数据库,不要只删文件不更新数据库);3.注意(产品图白底/统一背景(专业感),加水印(防盗图,后台开启水印或图片处理),alt标签写产品名(SEO),图片懒加载(产品列表多图,懒加载提升速度),缩略图和原图区分(列表用缩略图,详情用原图,不要列表加载原图(慢))。新闻/文章配图:后台文章编辑→封面图/缩略图→上传(尺寸如300x200,JPG<50KB)→保存,文章内容里的图片用编辑器上传按钮插入(自动存/upload/,路径写进文章内容),修改就重新上传替换,注意文章内容里的图片路径是绝对路径(迁移网站后路径可能错,批量替换)。团队/资质/证书图片:后台对应栏目(关于我们→团队成员,荣誉资质→证书)→编辑→上传图片(尺寸统一,证书扫描件PDF转图片,压缩)→保存,或模板写死的改HTML/CSS,注意人员照片统一尺寸/背景(专业感),资质图片清晰(文字可辨)。Favicon修改:1.制作favicon(32x32或64x64%20PNG,转ICO格式,在线favicon生成工具,或用logo缩小);2.上传到网站根目录(favicon.ico,浏览器自动请求根目录favicon.ico);3.模板head里加(或PNG格式),多尺寸(apple-touch-icon给iOS);4.清浏览器缓存(favicon缓存强,强制刷新Ctrl+F5或换浏览器测试)。背景图片修改:CSS里background:url('/images/bg.jpg'),改CSS文件(/template/当前模板/css/style.css),搜索background找到对应选择器,改url路径,上传新背景图,清缓存,注意背景图压缩(大图要压缩,用CSS background-size:cover/contain适配,background-position居中,background-repeat控制平铺,渐变色替代纯色背景图(减少请求))。

站长反馈:「公司网站logo换了,前台还是旧的,查了是CDN缓存,刷新CDN就好了,换图片一定要清缓存(CMS缓存+CDN+浏览器)」「产品图显示不出来,F12看404,原来是迁移后图片路径还是旧域名,批量替换数据库路径就好了」。

安全提醒:网站图片修改与管理安全注意事项——1.上传图片要验证(后台图片上传功能如果没验证,可能被上传webshell(改后缀名.php.png/Content-Type伪造),后台上传要:白名单后缀(jpg/png/gif/webp/svg,不要允许php/exe/html)、验证文件头(不是只看后缀,getimagesize验证是真图片)、重命名(随机文件名,不要用原文件名(可能含路径/特殊字符))、上传目录禁执行(Nginx location ~* ^/upload/.*.(php|php5)$ { deny all; },上传目录不能执行PHP,即使上传了webshell也不能执行)、存在独立域名/OSS(图片域名和主站分开,即使上传恶意文件也不影响主站),很多网站被黑是通过上传漏洞(图片上传没验证,传webshell),图片上传功能一定要安全加固,特别是有用户上传的(评论/论坛/会员));2.图片不要含敏感信息(图片EXIF可能含GPS位置/相机型号/拍摄时间/作者,上传到网站会泄露隐私(特别是个人照片/办公照片),上传前清除EXIF(Photoshop存为Web时勾选去掉EXIF,TinyPNG自动去EXIF,命令行exiftool -all= image.jpg),公司网站照片(办公室/团队/活动)不要含敏感信息(白板上的密码/内部文档/电脑屏幕内容),发布前检查/模糊处理,证书/资质图片不要含敏感个人信息(身份证号/地址,打码),图片是网站内容的一部分,也要注意信息泄露);3.图片权限不要777(上传目录/图片文件权限777(任何人可写),被黑后可能被篡改/上传恶意文件,正确:图片文件644(rw-r--r--,属主可写,其他只读),目录755(rwxr-xr-x,属主可写,其他可读可执行),属主是Web服务器用户(www/nginx/apache),上传目录可写但禁执行(前面说的),不要chmod 777图省事(安全风险大),批量修正:find /www -type f -exec chmod 644 {} ; find /www -type d -exec chmod 755 {} ;,chown -R www:www /www);4.图片备份不要忽略(很多人备份数据库和代码,不备份图片(图片在/upload/或/images/,体积大),但图片是网站重要内容(产品图/新闻图/团队图),被删/被黑篡改/服务器故障就没了,备份要包含图片目录(全量+增量,图片变化少,每周全量+每天增量即可),异地备份(OSS/其他服务器),图片迁移到OSS后OSS也要开版本控制/跨区域复制(防误删/机房故障),备份是最后防线,图片虽大但也要备份,特别是产品图/原创图(重新拍摄成本高));5.图片CDN/OSS配置要安全(图片存OSS/CDN,Bucket权限不要公共读写(任何人能上传/删除/篡改,会被滥用/挂马/勒索,公开静态图片用公共读,敏感图片私有,不要公共读写),AK用子账号最小权限(只给指定Bucket读写,不要主账号AK/全权限,AK不硬编码前端/APP,用STS临时令牌),开防盗链(Referer白名单,防盗链+防恶意引用),开日志(访问日志,异常流量/盗链/攻击早发现),版本控制(误删能恢复),跨区域复制(异地灾备),CDN缓存规则(图片长期缓存,更新用文件名hash/URL刷新,不要缓存动态内容),OSS/CDN是图片存储分发,配置不当会被滥用/泄露/篡改,要按安全规范配置);6.图片被篡改/挂马要全面排查(发现网站图片被篡改(logo被改/图片被替换成恶意内容/图片里藏恶意代码(隐写)),可能是被黑(FTP/后台/服务器被入侵),不要只换回图片(黑客还会再改),要全面排查:被黑入口(FTP弱密码/后台弱密码/上传漏洞/服务器漏洞/webshell),webshell/后门(网站目录扫描异常文件/最近修改文件/webshell特征),异常管理员/账号,服务器异常进程/登录,清除webshell/后门+修复漏洞+改所有密码(FTP/后台/服务器/数据库/邮箱)+加固(WAF/文件监控/权限最小化/安全组)+换回正确图片+清缓存+监控,图片被篡改是被黑的信号,要重视,全面处理不要只换回表面);7.图片文件名不要用中文/特殊字符(中文文件名在URL里会编码(%xx%xx),可能导致:部分浏览器/服务器编码不一致404、RSS/分享/爬虫解析问题、URL长且不美观、迁移/备份编码问题,正确:用小写英文/拼音+连字符(-),如company-logo.png/product-1.jpg,不要用中文(公司logo.png)/空格(product 1.jpg,URL里变%20)/特殊字符(()[]{}@#$,URL编码问题),批量重命名工具(rename/脚本,统一规范),文件名规范是网站基础规范,避免很多诡异问题);8.图片不要直接引用外部图床(很多人为了省空间/省事,直接引用外部图床(微博图床/百度相册/免费图床)的图片,风险:图床服务关闭/删图→图片404,图床防盗链→你的网站不显示,图床限速/慢→影响你的网站速度,图床被黑→你的图片被篡改,图床政策变化(免费转付费/限制外链),正确:图片存在自己的服务器/OSS/CDN(可控/稳定/安全),不要依赖第三方免费图床,特别是重要图片(logo/产品图/首页图),临时图片(测试/草稿)可以用图床,正式发布要迁到自己存储,引用外部图片还要注意版权(盗图侵权),用正版/原创/授权图片);9.图片版权要注意(公司网站用图片(网络搜的图/百度图片/图库)可能侵权(版权方索赔,尤其是商业用途),图片版权纠纷越来越多,正确:用正版图片(付费图库(视觉中国/站酷海洛/Shutterstock,购买授权)、免费可商用图库(Unsplash/Pexels/Pixabay,CC0协议,可商用,看清楚协议)、自己拍摄/设计(原创,最安全)、公司购买企业图库授权(年度授权,全公司用),不要用百度图片/谷歌图片直接搜的(大多有版权),不要用带水印/明显版权的图片,图片授权保留凭证(购买记录/授权书,被投诉时能证明),人物图片要肖像权授权(团队照片/模特照片,签肖像权协议),图片版权是法律风险,不要侥幸,侵权赔偿可能几万到几十万,正版图片成本不高(免费可商用图库足够大多数企业站用));10.图片监控要包含(网站监控不要只监控页面可用性,还要监控图片:图片404(定期爬取全站,发现404图片及时修复(路径错/文件删了),百度站长平台抓取异常也能看到)、图片加载速度(Core Web Vitals里LCP(最大内容绘制,通常是首屏大图),监控LCP,慢了优化)、图片体积(定期审计大图片,压缩)、图片盗链(OSS/CDN日志看Referer,异常盗链及时处理)、图片篡改(文件完整性监控,图片被改告警),图片是网站的重要组成,监控图片能提升用户体验和SEO,不要只监控文字内容。

公司网站图片显示不出来_路径与权限排查

标签:

更新时间:2026-08-26 18:20:31

上一篇:PbootCMS授权绑定?_域名更换后重新授权_实操指南

下一篇:PbootCMS内容页浏览数/点赞_互动标签调用