应该是一个非常简单的问题，使用jade和css在div中不显示图片，但我一直解决不了，求教各位大神！！！谢谢！ - CNode技术社区
应该是一个非常简单的使用jade和css在div中不显示图片的问题，但我一直解决不了，求教各位大神。
我是个新手，在学习用nodejs+mongodb+jade做网页。这个问题中应该只涉及到了jade和css。
我想做一个由div分块的网页，每个块里面显示一张图片。示意图如下：
图中蓝色部分是一个大的div块，橙色部分是3个小的div块，绿色矩形表示3张图片。做起来应该是很简单的。
下面是我的CSS代码和Jade代码。
homePage.css:
html{height:100%;}
body{height:98%;background-color:rgb(128,128,128);}
#Container{
min-height:100%;
height: 50%;
width:95%;
background-color:
#ButtonBlock{
height: 35%;
width:100%;
padding:25px 0px 0px 0
text-align:
background-color:
homePage.jade:
doctype html
title Hotel Home Page
link(rel=‘stylesheet’, href=’/stylesheets/hotelHomePage.css’)
div#Container
div#ButtonBlock
img(src=’/images/button1.jpg’)
div#ButtonBlock
img(scr=‘images/button2.jpg’)
div#ButtonBlock
img(src=’/images/button2.jpg’)
img(src=‘images/button1.jpg’)
写的时候缩进是没有问题的，这里没有显示缩进。自己感觉代码写得挺正常的，但是运行起来效果是这样：
图中的“按钮1”“按钮2”就是要显示的图片。可以看见上方div和下方div都可以正确显示图片，只有中间的div不能显示图片。请问错误在哪里呢？谢谢各位大神！
为什么绝对路径，相对路径混写的。
inspect 一下出问题的element，看是哪个attribute出问题了。
你说的是图片的路径吗。我这样写是为了看看是不是路径写法的影响。实际上这两种写法都可以。我试过写了一个handler来处理由图片发送的get请求，显示它请求的url，发现即使我写的’images/button2.jpg’，get请求的url也是’/images/button2.jpg’。所以应该不是这个地方的问题，我也就先放在这没改了。
是不是用util.inspect去查看对象的意思啊？但是我觉得这个问题貌似根本就没有涉及到js代码。图片发送的get请求是自动处理的（以前我是手动写了个router.get()来处理图片发送过来的get请求），除了这个get请求之外，好像就没有什么涉及到js的了。
我最想不明白的是，三个紫色div块用的是同一个ButtonBlock的ID，也就是它们的属性参数是相同的，图片也是相同的button1.jpg和button2.jpg，为什么上下两个都可以显示图片，只有中间的不行。
你确定缩进没问题？全tab还是全空格？
不管有没有问题，你在浏览器里右键”查看元素“，看看html代码符合不符合你的预期。如果真是缩进问题，html代码就和你预想的不同。
不是。是检查DOM element的
我这样做了一下，确实发现有不正常的地方。上方div块中的图显示为200px × 50px，并且图片的路径在img标签中是显示为一个链接的，即有下划线，点击后会显示该图片。如图所示：
而中间div块的图片显示为0px × 0px，并且它在img标签中的路径不是一个链接，如图：
我以为是图片尺寸太大，用了10px的正方形图片，结果还是一样的。真是完全没道理啊！完全想不出原因。
我用的全TAB。缩进确实没问题的，如果有问题运行到这个页面会报错的。查看了元素确实发现了不正常的地方，就是中间div块的大小显示为0px × 0px，而且它在img标签里面的路径不是链接（其它图片路径显示为链接）。可以看我楼上回复中的截图。感觉这个问题完全没道理啊！
我刚才按照你的代码实现了下，在我这边没有问题。
如果是tab和空格混用问题，编译时就会报错了，但有的时候还是会出现缩进错误造成的html代码不符合预期，这种情况是自己疏忽造成的，编译就不会报错，浏览器还会自作聪明的帮你将元素闭合起来。你将jade生成的html输出到文件看下，是不是你想要的结果。
&img src=&test.jpg&&
&img scr=&test.jpg&&
一定要仔细啊。
Good catch!
对对对！还真是写错了！都怪自己写得不够专心啊！太谢谢你了！缩进有IDE照看着一般不会有问题，最容易大意的往往还是这些小阴沟，哎！希望大家引以为戒，不要步我的后尘啊！谢谢你，非常感谢！
CNode 社区为国内最专业的 Node.js 开源技术社区，致力于 Node.js 的技术研究。
服务器赞助商为
，存储赞助商为
，由提供应用性能服务。
新手搭建 Node.js 服务器，推荐使用无需备案的这个只有对骂哦，而且女生都没有占上风嘛
呵呵，好玩，留下了
尧尧怎么会扁千影呢，呵呵，不过你这个好像不够凶啊~~~~
总觉得还能再BT一点，比如基纽手里拿个双截棍，巴特手里拿根萝卜什么的………………
基纽特种部队
汗……扁人的吗？
很可爱，但但但跟我的要求差太多了吧~~~~~
呵呵，这个好像耍杂技啊
您的举报已经提交成功，我们将尽快处理，谢谢！
1，全身治疗：聚肌胞，板兰根肌注或内服左旋咪唑，乌洛托品。
2，局部治疗：液氮冷冻或镭射治疗，外用鸦胆子仁，疣必治等。
对数目较多，经久不愈者可口服乌罗托品，0...
你好，这个治疗可用2.5％5-氟脲嘧啶软膏涂疣面,疣数较多者可用盐酸吗啉呱和左旋咪唑治疗。
大家还关注
的动画有多少集?动画有结局吗? "><>的动画有多少集?动画有结局吗...
网王 求免费观看的网址!!最好不...
(window.slotbydup=window.slotbydup || []).push({
id: '2081942',
container: s,
size: '1000,60',
display: 'inlay-fix'您好，我是华为c8813D的用户，手机的相册不能用是怎么回事，拍完照也保存不了，相册中显示没有可再用图片，求帮助，谢谢!紧急！！
内容为广告/垃圾，我要举报！
特聘专家具有协助内容审核的特权
举报后内容将不能在前台展示
错乱举报会导致该权利被剥夺
选择举报原因&
已有2个回答
专家星级&:&0.5星
问答堂专家综合评分
问题评分&:&0星
采纳、点赞&:&0星
二次回复率&:&5星
内容为广告/垃圾，我要举报！
特聘专家具有协助内容审核的特权
举报后内容将不能在前台展示
错乱举报会导致该权利被剥夺
选择举报原因×
擅长领域：
基于楼主的问题，排查思路如下：关机重新启动，然后重新打开手机相册看看是否恢复正常。另外如果相册照片存储在内存卡里，换其他内存卡试试。问题还是照旧的话，将相关重要数据备份（联系人，短信），恢复出厂设置试试（一般为；设定—重置/隐私权/个人—恢复出厂设置）。
留下你的评论
[编辑专家]
专家星级&:&3星
问答堂专家综合评分
问题评分&:&5星
采纳、点赞&:&0星
二次回复率&:&0星
内容为广告/垃圾，我要举报！
特聘专家具有协助内容审核的特权
举报后内容将不能在前台展示
错乱举报会导致该权利被剥夺
选择举报原因×
擅长领域：
参与话题：
看看你这手机里的sd卡是不是有锁状态，那卡上有个可以拨动的开关，你拨到没锁那边如果不是卡的事，看看是不是系统对相机app的相册权限没开，在设置-安全里可以设置如果找不出什么毛病就恢复出厂设置试试，还不行就联系售后吧
留下你的评论
该内容由系统自动生成
参考价：￥899.00
主屏尺寸4.5英寸
电池容量1700mAh
主屏分辨率854x480像素
电池类型可拆卸式电池
后置摄像头500万像素
CPU频率1.2GHz
前置摄像头30万像素
CPU类型高通 骁龙Sna
网络类型双卡
名网友点评分数
欢迎机友们加入中关村华为官方QQ群：一群已满 加新群：交流玩机！* 此中文版Recovery基于CWM-Recovery6.0.3.5源码编译汉化制作.*感谢NEEKH大制...
微信公众账号ZOL问答堂
关注微信，随时随地解答您的疑惑
ZOL问答堂官方微博@ZOL问答堂
关注成功！该问题被回答后，将给您发送站内短信。
您也可以通过关注问答堂微信，及时获得您关注问题的回答。
微信关注问题方法“”今天看啥 热点：
亲~您好。谁有这个图片的套图啊？或者告诉我叫什么名字也可以～～感激！！
我现在就在用，我也是听行业人介绍的，到现在用了快1个月了。总体上还是不错的。给我的感觉是：简单易用，容易操作，不用学就能上手，如果有更多模版下载那就更好了。软件还行，到现在还没出现过任何的问题！那我现在处理图片的效率加快了。给我的印象还是蛮好的！我是觉得蛮好用的，才给你介绍的!如果你想了解更多的资料你可以去他们的官网去了解！ 他们有提供试用时间的。那你如果想先试用一段时间 我现在可以给你我之前下载的地址：/file/dpbjckjl参考文献：/file/dpbjckjl
求烟花妹妹套图种子.
求套图或者图片作者P站画师oki子的作品：创作Pixiv ID: 原图地址画师主页亲去画师主页里看看吧~~提问者评价谢谢!
求套图 求高清大图我有种子 下完20G没有
18个g多 要的话 请采纳hi我 一定发送 满意后采纳追问
只要这个女的几张就行 要那么多干嘛 回答
。露 各种清纯
艺术照种子不大可选择下载要就留邮箱 追问
发了请查收记得采纳 追问
没收到 回答
邮箱对不？我再发一次 追问
大哥 我要的这图片在哪个包里面
张静思 套图 视频张净思,张静思,09年参加第44界香港工展选美比赛,张净思因为拍这个图,被迫自动退出比赛,张静思是3号选手.今年2月香港某电视台节目“遇见芙萝拉张净思”,就是她主持的女厨.本来31岁了,装嫩硬说才26岁!张静思英文名字Flora ,据资料介绍1985年出生,那么就是说今年26岁,其实不然,她参赛时候就已经29岁了,满打满算今年31岁!张静思套图本人大概在去年4月时候就看过了,当时觉得一般,乳房已经下垂,葡萄颜色也较深,可能是年纪稍大吧.部分朋友在找张净思视频下载,博主可以明确告诉你,张净思视频没有的,只有图片下载!今年香港某电视台推出“遇见芙萝拉张净思”节目,她做主持人,张净思竟然只穿透视围裙下厨,还在外景拍摄,既然这样我想有必要放出张静思参赛前得那个照片,让大家更近一步了解张静思小姐究竟如何,仔细看一下她的风貌是否妖娆. 内容稍后发至你邮箱
注意查收追问
视频有没？ 加分
暂无相关文章
相关搜索：
相关阅读：
相关频道：
电脑装机最近更新}