当前位置：Gxlcms > html代码 > htm文件中图片显示问题_html/css_WEB-ITnose

htm文件中图片显示问题_html/css_WEB-ITnose

时间：2021-07-01 10:21:17 帮助过：23人阅读

这里是用于处理的一个Servlet 
  1. import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class CreateTip extends HttpServlet {
  2. public void doGet(HttpServletRequest request, HttpServletResponse response)
  3. throws ServletException, IOException {
  4. doPost(request,response);
  5. }
  6. public void doPost(HttpServletRequest request, HttpServletResponse response)
  7. throws ServletException, IOException {
  8. //虚拟一个商品列表
  9. String[][] shop ={{"商品一","90","photo/photo1.jpg"},
  10.   {"商品二","190","photo/photo2.jpg"},
  11.   {"商品三","290","photo/photo3.jpg"}
  12. }; 
  13. //获得客户端提交的参数
  14. int index =Integer.parseInt(request.getParameter("index"));
  15. response.setContentType("text/xml");
  16. response.setCharacterEncoding("UTF-8");
  17. PrintWriter out = response.getWriter();
  18. //以XML文档形式返回给客户端
  19. out.println("<shop>");
  20. out.println("<name>"+shop[index][0]+"</name>");
  21. out.println("<price>"+shop[index][1]+"</price>");
  22. out.println("<photo>"+shop[index][2]+"</photo>");
  23. out.println("</shop>");
  24. out.flush();
  25. out.close();
  26. }}

下面是用于显示图片的代码 
  1.       <h2>工具提示</h2><br>    <hr>    商品一<br><br>    商品二<br><br>    商品三<br><br>    
  2. <div id="tip" style="position:absolute;display:none;border:1px;border-style:solid;">
  3. <table id="tipTable" border="0" bgcolor="#ffffee">
  4. <tbody><tr align="center">
  5. <td><img id="photo" src="" height="80" width="80"></td>
  6. </tr>
  7. <tr>
  8. <td></td>
  9. </tr>
  10. <tr>
  11. <td></td>
  12. </tr>
  13. </tbody></table>
  14. </div>
  15.



但是就是无法显示图片，图片那里就一把红XX，上面用的是相对路径啊，不知道怎么回事，求解、、、


回复讨论(解决方案)

怎么没人呢？？？

相对不行就用绝对啊

X就是你的图片路径没有对 检查一下

相对不行就用绝对啊
可使用绝对的话适应性就太差了，而且只有在SRC后面写绝对路径才行，只要是从Servlet中传回来的路径都变成了http://localhost....的格式，所以又没法显示了

X就是你的图片路径没有对 检查一下
路径是对的，但就是没法用相对路径，不知道问什么

X就是你的图片路径没有对 检查一下

这个是我图片资源的完整路径，就在工程的根目录下
D:\Java\workspace\TestAJAX\photo

把你所链接的那个图片地址写上来看看，还要注意图片格式

//虚拟一个商品列表
String[][] shop ={{"商品一","90","photo/photo1.jpg"},
{"商品二","190","photo/photo2.jpg"},
{"商品三","290","photo/photo3.jpg"} };
地址都是在Servlet中写好的，然后调用回去，改变下面的src 

  1. <div id="tip" style="position:absolute;display:none;border:1px;border-style:solid;">    <br><p></p><p class="sougouAnswer">  是上面的的吧？  <br> 把你所链接的那个图片地址写上来看看，还要注意图片格式                    
  2.                   
  3.  
  4.                     </p><div class="">
  5.                         <ul class="m-news-opt fix">
  6.                             <li class="opt-item">
  7.                                 <a href="/htmldaima-274679.html" target="_blank"><p>< 上一篇</p><p class="ellipsis">HTML5canvas如何通过鼠标点击事件弹出一个table来？急急急~_html/css_WEB-ITnose</p></a>
  8.                             </li>
  9.                             <li class="opt-item ta-r">
  10.                                  <a href="/htmldaima-274681.html" target="_blank"><p>下一篇 ></p><p class="ellipsis">如何换行_html/css_WEB-ITnose</p></a>
  11.                             </li>
  12.                         </ul>
  13.                     </div><div class="g-title fix">
  14.                         <h2 class="title-txt">人气教程排行</h2>
  15.                     </div><div class="m-rank u-dashed mb40">
  16.                         <ul>
  17.  <li class="rank-item">
  18.                                 <a href="/htmldaima-274978.html" title="如何生成一个调查问卷_html/css_WEB-ITnose" class="item-name ellipsis" target="_blank">
  19.                                     <span class="g-art-count fr">230次</span>
  20.                                     <span class="g-sort-num top">1</span>
  21.                                    如何生成一个调查问卷_html/css_WEB-ITnose                                </a>
  22.                             </li>
  23.   
  24.   
  25.   <li class="rank-item">
  26.                                 <a href="/htmldaima-274080.html" title="在页面直接显示日历_html/css_WEB-ITnose" class="item-name ellipsis" target="_blank">
  27.                                     <span class="g-art-count fr">230次</span>
  28.                                     <span class="g-sort-num second">2</span>
  29.                                    在页面直接显示日历_html/css_WEB-ITnose                                </a>
  30.                             </li>
  31.   
  32.   
  33.   <li class="rank-item">
  34.                                 <a href="/htmldaima-262106.html" title="如何点击a标签实现弹出inputfile上传文件对话框_HTML/Xhtml_网页制作" class="item-name ellipsis" target="_blank">
  35.                                     <span class="g-art-count fr">230次</span>
  36.                                     <span class="g-sort-num third">3</span>
  37.                                    如何点击a标签实现弹出inputfile上传文件对话框_HTML/Xhtml_网页制作                                </a>
  38.                             </li>
  39.   
  40.   
  41. <li class="rank-item">
  42.                                 <a href="/htmldaima-278863.html" title="关于列表标记的详细介绍" class="item-name ellipsis" target="_blank">
  43.                                     <span class="g-art-count fr">229次</span>
  44.                                     <span class="g-sort-num ">4</span>
  45.                                    关于列表标记的详细介绍                                </a>
  46.                             </li>
  47.   
  48.   
  49. <li class="rank-item">
  50.                                 <a href="/htmldaima-277331.html" title="cssborder-bottom（指定下边线的样式、宽度及颜色）" class="item-name ellipsis" target="_blank">
  51.                                     <span class="g-art-count fr">229次</span>
  52.                                     <span class="g-sort-num ">5</span>
  53.                                    cssborder-bottom（指定下边线的样式、宽度及颜色）                                </a>
  54.                             </li>
  55.   
  56.   
  57. <li class="rank-item">
  58.                                 <a href="/htmldaima-270548.html" title="html新闻详情页_html/css_WEB-ITnose" class="item-name ellipsis" target="_blank">
  59.                                     <span class="g-art-count fr">229次</span>
  60.                                     <span class="g-sort-num ">6</span>
  61.                                    html新闻详情页_html/css_WEB-ITnose                                </a>
  62.                             </li>
  63.   
  64.   
  65. <li class="rank-item">
  66.                                 <a href="/htmldaima-268070.html" title="为何页面内容和网页边缘有空隙_html/css_WEB-ITnose" class="item-name ellipsis" target="_blank">
  67.                                     <span class="g-art-count fr">229次</span>
  68.                                     <span class="g-sort-num ">7</span>
  69.                                    为何页面内容和网页边缘有空隙_html/css_WEB-ITnose                                </a>
  70.                             </li>
  71.   
  72.   
  73. <li class="rank-item">
  74.                                 <a href="/htmldaima-269054.html" title="position:fixed定位时“高度坍塌”问题的解决_html/css_WEB-ITnose" class="item-name ellipsis" target="_blank">
  75.                                     <span class="g-art-count fr">228次</span>
  76.                                     <span class="g-sort-num ">8</span>
  77.                                    position:fixed定位时“高度坍塌”问题的解决_html/css_WEB-ITnose                                </a>
  78.                             </li>
  79.   
  80.   
  81. <li class="rank-item">
  82.                                 <a href="/htmldaima-280863.html" title="htmlp标签怎么换行？htmlp标签添加br换行标签的应用" class="item-name ellipsis" target="_blank">
  83.                                     <span class="g-art-count fr">227次</span>
  84.                                     <span class="g-sort-num ">9</span>
  85.                                    htmlp标签怎么换行？htmlp标签添加br换行标签的应用                                </a>
  86.                             </li>
  87.   
  88.   
  89. <li class="rank-item">
  90.                                 <a href="/htmldaima-281519.html" title="HTML的<!DOCTYPE>标签" class="item-name ellipsis" target="_blank">
  91.                                     <span class="g-art-count fr">226次</span>
  92.                                     <span class="g-sort-num ">10</span>
  93.                                    HTML的<!DOCTYPE>标签                                </a>
  94.                             </li>
  95.   
  96.   
  97. <li class="rank-item">
  98.                                 <a href="/htmldaima-280725.html" title="html页面中友情链接怎么进行添加设置？（代码示例）" class="item-name ellipsis" target="_blank">
  99.                                     <span class="g-art-count fr">226次</span>
  100.                                     <span class="g-sort-num ">11</span>
  101.                                    html页面中友情链接怎么进行添加设置？（代码示例）                                </a>
  102.                             </li>
  103.   
  104.   
  105. <li class="rank-item">
  106.                                 <a href="/htmldaima-278651.html" title="form表单中属性及功能应用介绍汇总" class="item-name ellipsis" target="_blank">
  107.                                     <span class="g-art-count fr">226次</span>
  108.                                     <span class="g-sort-num ">12</span>
  109.                                    form表单中属性及功能应用介绍汇总                                </a>
  110.                             </li>
  111.   
  112.   
  113. <li class="rank-item">
  114.                                 <a href="/htmldaima-278586.html" title="详解form标签中的method属性" class="item-name ellipsis" target="_blank">
  115.                                     <span class="g-art-count fr">226次</span>
  116.                                     <span class="g-sort-num ">13</span>
  117.                                    详解form标签中的method属性                                </a>
  118.                             </li>
  119.   
  120.   
  121. <li class="rank-item">
  122.                                 <a href="/htmldaima-277758.html" title="HTML5Canvas逼真烟雾效果js插件" class="item-name ellipsis" target="_blank">
  123.                                     <span class="g-art-count fr">226次</span>
  124.                                     <span class="g-sort-num ">14</span>
  125.                                    HTML5Canvas逼真烟雾效果js插件                                </a>
  126.                             </li>
  127.   
  128.   
  129. <li class="rank-item">
  130.                                 <a href="/htmldaima-275669.html" title="页面跳转特效_html/css_WEB-ITnose" class="item-name ellipsis" target="_blank">
  131.                                     <span class="g-art-count fr">226次</span>
  132.                                     <span class="g-sort-num ">15</span>
  133.                                    页面跳转特效_html/css_WEB-ITnose                                </a>
  134.                             </li>
  135.   
  136.   
  137. <li class="rank-item">
  138.                                 <a href="/htmldaima-271209.html" title="改变鼠标选中区域的样式。_html/css_WEB-ITnose" class="item-name ellipsis" target="_blank">
  139.                                     <span class="g-art-count fr">226次</span>
  140.                                     <span class="g-sort-num ">16</span>
  141.                                    改变鼠标选中区域的样式。_html/css_WEB-ITnose                                </a>
  142.                             </li>
  143.   
  144.   
  145. <li class="rank-item">
  146.                                 <a href="/htmldaima-273428.html" title="关于$("body").append()一段html代码，在页面写能触发事件，写在js文件里写就没有_html/css_WEB-ITnose" class="item-name ellipsis" target="_blank">
  147.                                     <span class="g-art-count fr">225次</span>
  148.                                     <span class="g-sort-num ">17</span>
  149.                                    关于$("body").append()一段html代码，在页面写能触发事件，写在js文件里写就没有_html/css_WEB-ITnose                                </a>
  150.                             </li>
  151.   
  152.   
  153. <li class="rank-item">
  154.                                 <a href="/htmldaima-271182.html" title="CSS3悬浮动画效果_html/css_WEB-ITnose" class="item-name ellipsis" target="_blank">
  155.                                     <span class="g-art-count fr">225次</span>
  156.                                     <span class="g-sort-num ">18</span>
  157.                                    CSS3悬浮动画效果_html/css_WEB-ITnose                                </a>
  158.                             </li>
  159.   
  160.   
  161. <li class="rank-item">
  162.                                 <a href="/htmldaima-271093.html" title="纯C语言实现的CSS解析器：katana_html/css_WEB-ITnose" class="item-name ellipsis" target="_blank">
  163.                                     <span class="g-art-count fr">225次</span>
  164.                                     <span class="g-sort-num ">19</span>
  165.                                    纯C语言实现的CSS解析器：katana_html/css_WEB-ITnose                                </a>
  166.                             </li>
  167.   
  168.   
  169. <li class="rank-item">
  170.                                 <a href="/htmldaima-267953.html" title="body在默认情况下是具有margin外边距的_html/css_WEB-ITnose" class="item-name ellipsis" target="_blank">
  171.                                     <span class="g-art-count fr">225次</span>
  172.                                     <span class="g-sort-num ">20</span>
  173.                                    body在默认情况下是具有margin外边距的_html/css_WEB-ITnose                                </a>
  174.                             </li>
  175.                         </ul>
  176.                     </div><div class="footer">
  177.    本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！</div><div style="display:none">
  178. <div class="login-box" id="login-dialog">
  179. <div class="login-top"><a class="current" rel="nofollow" id="login1" onclick="setTab('login',1,2);">登录</a></div>
  180. <div class="login-form" id="nav-signin">
  181.  <!-- <div class="login-ico"><a rel="nofollow" class="qq" id="qqlogin" target="_blank" href="/user-center-qqlogin.html"> QQ </a></div>  -->
  182. <div class="login-box-form" id="con_login_1">
  183. <form id="loginform" action="/user-center-login.html" method="post" onsubmit="return false;"></form>
  184. <p class="int-text">
  185. <input class="email" id="username" name="username" type="text" value="用户名或Email" onfocus="if(this.value=='用户名或Email'){this.value='';}" onblur="if(this.value==''){this.value='用户名或Email';};"></p>
  186. <p class="int-text">
  187. <input class="password1" type="password" id="password" name="password" value="******" onblur="if(this.value=='') this.value='******';" onfocus="if(this.value=='******') this.value='';">
  188. </p>
  189. <p class="int-info">
  190.                 <label class="ui-label"> </label>
  191.                 <label for="agreement" class="ui-label-checkbox">
  192.                 <input type="checkbox" value="" name="cookietime" id="cookietime" checked="checked">
  193.                 <input type="hidden" name="notforward" id="notforward" value="1">
  194.                 <input type="hidden" name="dosubmit" id="dosubmit" value="1">记住我的登录 </label>                           
  195.        <a rel="nofollow" class="aright" href="/user-center-forgetpwd.html" target="_blank"> 忘记密码？ </a></p>
  196.   <p class="int-btn"><a rel="nofollow" id="loginbt" class="loginbtn"><span>登录</span></a></p> 
  197.   
  198. </div>
  199. <form id="regform" action="/user-center-reg.html" method="post"></form>
  200. <div class="login-reg" style="display: none;" id="con_login_2">
  201. <input type="hidden" name="t" id="t">
  202.   <p class="int-text">
  203.     <input id="email" name="email" type="text" value="Email" onfocus="if(this.value=='Email'){this.value='';}" onblur="if(this.value==''){this.value='Email';};"></p>
  204.     <p class="int-text">
  205.     <input id="uname" name="username" type="text" value="用户名或昵称" onfocus="if(this.value=='用户名或昵称'){this.value='';}" onblur="if(this.value==''){this.value='用户名或昵称';};"></p>
  206.   <p class="int-text">
  207.   <input type="password" id="pwd" name="password" value="******" onblur="if(this.value=='') this.value='******';" onfocus="if(this.value=='******') this.value='';"> </p>
  208.   <p class="int-text1"><span class="inputbox">
  209.     <input id="validate" name="validate" type="text" value="验证码" onfocus="if(this.value=='验证码'){this.value='';}" onblur="if(this.value==''){this.value='验证码';};">
  210.     </span><span class="yzm-img"><img src="/user-checkcode-index" alt="看不清楚换一张" id="indexlogin"></span></p>
  211.   <p class="int-info">
  212.     <label>
  213.       <input value="" name="agreement" id="agreement" checked="checked" type="checkbox">
  214.       我已阅读<a rel="nofollow" href="/user-center-agreement.html">用户协议</a>及<a rel="nofollow" href="/user-center-agreement.html">版权声明</a></label>
  215.   </p>
  216.   <p class="int-btn"><input type="hidden" name="dosubmit">
  217. <a rel="nofollow" class="loginbtn" id="register"><span>注册</span></a></p>
  218. </div>
  219.  
  220. </div>
  221. </div>
  222. </div><div data-type="4" data-plugin="aroundbox" data-plugin-aroundbox-x="left" data-plugin-aroundbox-y="bottom" data-plugin-aroundbox-iconsize="60x60" data-plugin-aroundbox-fixed="1" data-plugin-aroundbox-offsetx="10"></div><table id="tipTable" border="0" bgcolor="#ffffee">        <tbody><tr align="center">            <td><img id="photo" src="" height="80" width="80"></td>        </tr>    
  223.                     
  224.                     
  225.                     
  226.                     
  227.                 
  228.               
  229.                     
  230.                 
  231.                   
  232.                     
  233.                     
  234.                 
  235.             
  236.             <!-- / 教程内容页 -->
  237.         
  238.     
  239.   
  240. <!-- 页尾 -->
  241. <!-- / 页尾 -->
  242.  
  243.  
  244.    
  245. <script src="https://hm.baidu.com/hm.js?6dc1c3c5281cf70f49bc0bc860ec24f2"></script><script>
  246. var _hmt = _hmt || [];
  247. (function() {
  248.   var hm = document.createElement("script");
  249.   hm.src = "https://hm.baidu.com/hm.js?6dc1c3c5281cf70f49bc0bc860ec24f2";
  250.   var s = document.getElementsByTagName("script")[0]; 
  251.   s.parentNode.insertBefore(hm, s);
  252. })();
  253. </script>
  254.  <script type="text/javascript" src="/layui/layui.js"></script>
  255.     <script>
  256.     layui.use('code', function() {
  257.         layui.code({
  258.             elem: 'pre', //默认值为.layui-code
  259.             about: false,
  260.             skin: 'notepad',
  261.             title: 'php怎么实现数据库验证跳转代码块',
  262.             encode: true //是否转义html标签。默认不开启
  263.         });
  264.     });
  265.     </script>
  266. </tbody></table></div>