黑马程序员技术交流社区

标题: 图片显示不出来？ [打印本页]
作者: 李元峰    时间: 2012-6-14 01:37
标题: 图片显示不出来？
我先把代码贴出来 大伙看看：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page import="com.bankel.DBoperate.*,java.util.*,com.bankel.DataBean.*" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>
<%  
     int newId = Integer.parseInt(request.getParameter("newId"));
     
     //System.out.println(newId);//测试获取的是不是正确的 newId
     NewsDao newsDao = new NewsDao();
     News news = newsDao.getNewsById(newId);

     //System.out.println(news.getContent());

%>


<%
   String userName = (String)session.getAttribute("userName");
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
   
    <title>My JSP 'showNews.jsp' starting page</title>
   
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">   
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
   
    <link rel="stylesheet" type="text/css" href="Scripts/showNews.css">
    <script type="text/javascript" src="Scripts/jquery-1.7.2.js"></script>
    <script type="text/javascript">
   
       $(function(){
            showAllComments();
       });
   
        function showAllComments(){
              $.post("ShowAllComments",{
                   newId:"<%=newId%>"
              },function(returnData,status){
                     $("#table2").html("");
                     var html ="<tr>快来发表你的意见吧!</tr>";
                     for(var i=0; i<returnData.length; i++){
                          var postTime = returnData.postTime;
                          var userName = returnData.userName;
                          var comments = returnData.comments;
                          if(i%2==0){
                             html+="<tr><td>"+
                               "<div id='#tabledivtop'>"+(returnData.length-i)+"楼&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+userName+"&nbsp;&nbsp;"+postTime+"</div>"+
                               "<div id='#tabledivbottom' style='background-color:#FFF5EE'>"+comments+"</div>"+
                              "</td></tr>";
                          
                          }else{
                            html+="<tr><td>"+
                               "<div id='#tabledivtop'>"+(returnData.length-i)+"楼&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+userName+"&nbsp;&nbsp;"+postTime+"</div>"+
                               "<div id='#tabledivbottom' style='background-color:#BC8F8F'>"+comments+"</div>"+
                              "</td></tr>";

                          }

                     }
                     $("#table2").append(html);
                     
                     
                     
              });
        
        }
         
          //点击取消按钮是 将文本框的内容设为空
          function cancel(){
              $("#comment").val("");
          }
        //1.点击确认时将先检查内容用户是否已经登录 2.评论内容不能为空；
        function reply(){
              
              
              //如果不为空 ,则获取该新闻 newId
              var pid="0";  //回复的是哪条评论
              var newId=<%=newId%>;//评论新闻的newId
              var comments=$("#comment").val();//获得品论内容
              var postTime =format(new Date());//评论的日期
              var userName="<%=userName%>";  //评论用户
              var state="1";  //     评论的状态
              var isleaf="1";   //     该评论是否是叶子节点
              
              //alert(userName);
              
               if(userName=="null"){
                  window.location.href="login.jsp";
                  return false;
              }
              
              if(comments.trim()==""){
                 alert("请输入内容!");
                 return false;
              }
            
              $.post("AddComment",{
                  newId:newId,
                  pid:pid,
                  comments:comments,
                  postTime:postTime,
                  userName:userName,
                  state:state,
                  isleaf:isleaf
              },function(returnData, status){
                    cancel();
                    showAllComments();
              });
   
        }
        
        
           //日期格式化
       function format(date){
          var year = date.getFullYear();//获得四位的年份

          var month = date.getMonth()+1;//获得月份

          var day = date.getDate();//获得当前日

          var hours = date.getHours();//获取小时数

          var minutes = date.getMinutes();

          var seconds = date.getSeconds();

          var time=year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
          return time;
       }
   
    </script>

  </head>
  
  <body>
         <div class="logo">
             <div class="logohello" style="vertical-align:middle;">欢迎访问本网站</div>
            
             <%
                 if(userName==null||userName==""){
              %>
             <div class="logologin">你还没有登录！</div>
             <div class="logologin1"><a href="login.jsp" class="login">登录</a></div>
             <%}else{ %>
              <div class="logologin">欢迎！</div>
             <div class="logologin1"><%=userName %></div>
             <%} %>
         </div>
         
         <hr class="oneline"/>
         
         <div class="divtwo">
                <div class="divtwo_top">
                      <div style="width:auto;float:left">您现在正在浏览:<%=news.getChannel()%>>><%=news.getProgram() %></div>
                      <div style="width:auto;float:right"><a href="GeneralUser/displayNews.jsp">更多>></a></div>
                </div>
                <hr class="oneline"/>
                <div class="divtwo_top"><%=news.getTitle()%>(<%=news.getTime() %>)</div>
                <hr class="oneline"/>
               
                <div class="divtwo_bottom" style="vertical-align:top">
                <img alt="等待上传" src="D:/Myeclipse-space/NewsPublicSystem/WebRoot/images/<%=newId%>.jpg" width="300px" height="200px" >&nbsp;&nbsp;<%=news.getContent()%></div>
               <%--  <div class="divtwo_bottom"><img alt="等待上传" src="<%=basePath%>WebRoot/images/<%=newId%>.jpg" width:300px; height:200px>&nbsp;&nbsp;&nbsp;&nbsp;<%=news.getContent() %></div> --%>
                <div class="comment">
                       <table id="table1">
                               <tr>
                                    <td style="color:red;background-color:#BDB76B;">发表你的看法</td>
                               </tr>
                              
                               <tr>
                                    <td>
                                          <textarea rows="3" cols="80" name="comment" id="comment"></textarea>
                                    </td>
                               </tr>
                              
                               <tr>
                                      <td colspan="2" style="text-align:center">
                                          <input type="button" value="回复"/>&nbsp;&nbsp;
                                          <input type="button" value="取消"/>
                                      </td>
                                      
                               </tr>
                       </table>
               
               
                </div>
               
                <div class="comment">
                          <table id="table2" >
                              
                          </table>
                </div>
         </div>
  </body>
</html>
下面是截图：


为什么 不显示图片呢？原本 那个 等待上传得地方应该 是图片的但是却没有
大家在看看 我在firebug 下面 查看 的html 代码：


大家看上面这张图的 最下面 html 代码里面 明明有 写 图片的地址 而且个格式也正确 ？但是为什么不显示呢？

而且 我已经上传图片到 服务器了：

17.jpg 已经在项目里，路径也没有偏差
大家看看 我上面图片 地址栏里  newId=17 这到底是什么情况呢？
有知道的同学吗？


作者: 符云爵    时间: 2012-6-14 09:41
火狐浏览器不能这样写图片地址的，它不认识，前缀是"ftp://"(好像是，很长时间前遇到过的问题)   表示本地的，以前我用无刷新做上传图片前预览的，遇到过类似的问题，查找了很久才知道，这就是为什么要考虑浏览器的兼容性问题，IE浏览器的前缀就不一样了。如果要做上传前预览，最好的解决方法就是图片先上传到服务器再返回服务器的图片相对地址进行显示，至少我只知道这么做，可能有高人知道怎么不用上传就可以进行预览呢，如果你熟悉各浏览器的内核，知道是怎么运作的，你也可以用js来做修改，不过这么多种浏览器，估计很难顾全兼容。  既然你图片已经在项目中了，你完全可以用相对路径<%=basePath%>/images/<%=newId%>.jpg    我没记错的话<%=basePath%>已经指定到WebRoot目录了吧？不需要再加WebRoot/了，不一定对哦，有错的地方还希望指出。
作者: 李元峰    时间: 2012-6-14 10:30
符云爵 发表于 2012-6-14 09:41
火狐浏览器不能这样写图片地址的，它不认识，前缀是"ftp://"(好像是，很长时间前遇到过的问题)   表示本地 ...

还 真是这样的  
能显示了
但是 我刚才打印了 basePath 的值：http://localhost:8080/NewsPublicSystem/

我这里有两条语句：
   <%--  <img alt="等待上传" src="D:/Myeclipse-space/NewsPublicSystem/images/<%=newId%>.jpg" width="300px" height="200px" >  <%=news.getContent()%></div> --%>
              <div class="divtwo_bottom"><img alt="等待上传" src="<%=basePath%>/images/<%=newId%>.jpg" width="300px" height="200px">    <%=news.getContent() %></div>

两条语句 他的路径值是一样的  但是下面可以显示出来 上面的却显示不出来 ？
作者: 符云爵    时间: 2012-6-14 11:21
李元峰 发表于 2012-6-14 10:30
还 真是这样的  
能显示了
但是 我刚才打印了 basePath 的值：http://localhost:8080/NewsPublicSystem/ ...

不是说了嘛。。basePath，也就是http://localhost:8080/NewsPublicSystem/   这个值默认是指定到项目底边的WebRoot目录的，你访问NewsPublicSystem这个项目它就会找到web.xml配置文件中的welcome-file标签中设置的页面，它的下级目录你可以添加相应的"/"访问。          火狐浏览器上的图片地址不能用本地的绝对地址，你可以设置下样式 背景图片发布再看看浏览器源码，如果我没记错的话火狐(还是IE来着)是加了前缀"ftp://"的，它不认识你写的D盘目录地下的啥啥啥。。    应该是所有浏览器都不支持写本地绝对地址来显示图片，这个我放大话了，那么多浏览器有些我都还不没用过呢，没测试过咯，不过我想错不到哪去
作者: 符云爵    时间: 2012-6-14 11:24
<%=basePath%>这个是通过访问tomcat来找到该图片的链接地址的，跟你写本地图片地址那个不一样，这里边的处理机制我就不知道了，我就明白不能像你那样写
作者: 李元峰    时间: 2012-6-14 17:08
符云爵 发表于 2012-6-14 11:24
这个是通过访问tomcat来找到该图片的链接地址的，跟你写本地图片地址那个不一样，这里边的处理机制我就不知 ...

真的是这样的  我懂了



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2