在Localhost中进行WAMP PHP测试

Question

I created a simple login webpage complete with CSS and Background images etc. It uses PHP to access the database when you click LOGIN/SUBMIT. 我创建了一个简单的登录页面，其中包含CSS和背景图片等。单击LOGIN / SUBMIT时，它将使用PHP访问数据库。

The problem is when I do the testing/viewing using the Localhost in WAMP. 问题是当我使用WAMP中的Localhost进行测试/查看时。 It displays the form and other content such as text and paragraphs..but the background images and images used as the border and button of the login page doesn't show. 它显示表单和其它内容，如文字和paragraphs..but用作登录页面的边框和按钮不会显示背景图片和图像。 It just shows the broken image icon. 它仅显示损坏的图像图标。

When I open the php page in the browser it displays everything the only thing it doesn't do right is the lookup in the database but that's understandable since the PHP server is in WAMP. 当我在浏览器中打开php页面时，它会显示所有内容，唯一不正确的是在数据库中查找，但这是可以理解的，因为PHP服务器位于WAMP中。

How do I make the images display correctly in the Localhost in WAMP? 如何使图像在WAMP的Localhost中正确显示？

Here's the code of my login page: 这是我的登录页面的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/cssLoginPage.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>

<script>

$(document).ready(function() {  

    //Put in the DIV id you want to display
    launchWindow('#dialog1');

    //if close button is clicked
    $('.window #close').click(function () {
        $('#mask').hide();
        $('.window').hide();
    });     

    //if mask is clicked
    $('#mask').click(function () {
        $(this).hide();
        $('.window').hide();
    });         


    $(window).resize(function () {

        var box = $('#boxes .window');

        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        //Set height and width to mask to fill up the whole screen
        $('#mask').css({'width':maskWidth,'height':maskHeight});

        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();

        //Set the popup window to center
        box.css('top',  winH/2 - box.height()/2);
        box.css('left', winW/2 - box.width()/2);

    }); 

});

function launchWindow(id) {

        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        //Set heigth and width to mask to fill up the whole screen
        $('#mask').css({'width':maskWidth,'height':maskHeight});

        //transition effect     
        $('#mask').fadeIn(1000);    
        $('#mask').fadeTo("slow",0.8);  

        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();

        $(id).css('top',  10);
        $(id).css('left', 780);
        /*      
        //Set the popup window to center
        $(id).css('top',  winH/2-$(id).height());
        $(id).css('left', winW/2-$(id).width()/2);
        */

        //transition effect
        $(id).fadeIn(2000); 


}

</script>


<title>Untitled Document</title>
</head>

<body>


<div id="boxes">

<!-- Start of Login Dialog -->  

<div id="dialog1" class="window">
  <div class="d-header">
  <form name="form1" method="post" action="loginproc.php">
    <input name="myusername"  type="text" id="myusername" value="username" onclick="this.value=''"/><br/>
    <input name="mypassword"  type="password" id="mypassword" value="Password" onclick="this.value=''"/>    
  </div>
  <div class="d-blank"></div>

  <div class="d-login"><input type="image" alt="Login" title="Login" src="./css/images/login-button.png"/></div>
  </form>
  </div>


  <!-- End of Login Dialog -->  
</div>
</div>
</body>
</html>

Here's the CSS: 这是CSS：

@charset "utf-8";
/* CSS Document */

.loginTable { 
    width:300px; margin: 250px auto;
    box-shadow: 1px 1px 3px #000;
            }

body
{
background:url(../css/images/homepage.jpg)no-repeat top center;

}
#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#000;
  display:none;
}

#boxes .window {
  position:fixed;
  width:440px;
  height:200px;
  display:none;
  z-index:9999;
  padding:20px;
}

#boxes #dialog {
  width:375px; 
  height:203px;
  padding:10px;
  background-color:#ffffff;
}

#boxes #dialog1 {
  width:375px; 
  height:203px;
}

#dialog1 .d-header {
  background:url(../css/images/login-header.png) no-repeat 0 0 transparent; 
  width:375px; 
  height:150px;
}

#dialog1 .d-header input {
  position:relative;
  top:60px;
  left:100px;
  border:3px solid #cccccc;
  height:22px;
  width:200px;
  font-size:15px;
  padding:5px;
  margin-top:4px;
}

#dialog1 .d-blank {
  float:left;
  background:url(../css/images/login-blank.png) no-repeat 0 0 transparent; 
  width:267px; 
  height:53px;
}

#dialog1 .d-login {
  float:left;
  width:108px; 
  height:53px;
}

#boxes #dialog2 {
  background:url(../css/images/notice.png) no-repeat 0 0 transparent; 
  width:326px; 
  height:229px;
  padding:50px 0 20px 25px;

Answer 1

The src in the image tag needs to be like this: image标签中的src必须是这样的：

<div class="d-login">
    <input type="image" alt="Login" title="Login" 
           src="/css/images/login-button.png"/>
</div>

Note that the src property no longer has . 请注意，src属性不再具有. . 。 Also, make sure the image is in the www folder. 另外，确保图像位于www文件夹中。

在Localhost中进行WAMP PHP测试

问题描述

1 个解决方案

解决方案1
0 2012-09-23 04:11:16

在Localhost中进行WAMP PHP测试

问题描述

1 个解决方案

解决方案1 0 2012-09-23 04:11:16

解决方案1
0 2012-09-23 04:11:16