Question

这是我的html文件。 1st.jpg文件位于同一文件夹中。但它仍然无法在服务器上加载。我不明白该怎么做。我尝试使用内联css，嵌入式css以及外部css。

在调试中，他们显示图片无法加载。

代码： -

＆＃13;

//Form hidding Effect
$(document).ready(function() {
  $("#b1").click(function() {
    $("#main").hide();
  });
});

//Button hidding Effect
$(document).ready(function() {
  $("#b1").click(function() {
    $("#b1").hide();
  });
});

//Sub division hidding Effect
$(document).ready(function() {
  $("#b1").click(function() {
    $("sub").hide();
  });
});

//FadeIn Effect on text
$(document).ready(function() {
  $("#b1").click(function() {
    $("#display").fadeIn(3000);
  });
});

//FadeOut Effect on text
$(document).ready(function() {
  $("#b1").click(function() {
    $("#display").fadeOut(8000);
  });
});

//FadeIn effect on Game_Table
$(document).ready(function() {
  $("#b1").click(function() {
    $("#game_div").fadeIn(13000);
  });
});

function setUsername() {
  var user = {
    name: document.getElementById('name').value,
    // lastname: document.getElementById('lastname').value,
    // address: document.getElementById('address').value,
    gen: document.getElementById('gen').value,
    city: document.getElementById('city').value,
    // emailid: document.getElementById('emailid').value,
    // mobileno: document.getElementById('mobileno').value,
  };

  var data = {
    data: {
      en: "insert",
      data: user
    }
  };
  console.log("here-->", user)
  socket.emit('req', data);
};

＆＃13;

.name {
  height: 40%;
  width: 40%;
  font-size: 25px;
  font-family: Time-new-roman;
}

table {
  border: 3px solid red;
  background-color: #DCB68E;
}


/*button{
    			margin-left: 30%;
    			padding-left: 5%;
    		}*/

td {
  width: 250px;
  height: 50px;
  padding-left: 8%;
}

.input_name {
  width: 130px;
}

.input_btn:hover {
  background-color: green;
  width: 100px;
  height: 50px;
}

#shadow1 {
  border: 1px solid;
  padding: 10px;
  box-shadow: 7px 7px black;
}

.ft_clr {
  color: #3f0a0a;
}

@font-face {
  font-family: 'TheBlacklist';
  src: url('./TheBlacklist/TheBlacklist.woff');
}

.div1 {
  width: 326px;
  height: 277px;
}

.div2 {
  width: 326px;
  height: 55px;
}

.div3 {
  margin-top: 250px;
  width: 1500px;
  height: 600px;
}

.input_btn {
  width: 100px;
  height: 50px;
  font-size: 175%;
  font-family: TheBlacklist;
  border: 1px solid;
  padding: 10px;
  box-shadow: 7px 7px black;
}

.h1_txt {
  color: black;
  font-size: 400%;
  font-family: TheBlacklist;
}

body {
  background-image: url('1st.jpg');
  "

}

#game_table {
  margin-top: 70px;
  box-shadow: 7px 7px black;
}

#game_table td {
  width: 60px;
  height: 60px;
  border: 3px solid black;
  background-color: skyblue;
}

#game_div {
  background-image: url('1st.jpg');
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>For in Row</title>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="/socket.io/socket.io.js"></script>


</head>

<body background="./1st.jpg">
  <div id="main" class="div1">
    <form action="" id="Registration" method="">
      <table cellpadding="1" bgcolor="white" align="left" cellspacing="2" id="shadow1">
        <tr>
          <td colspan=2>
            <center><b><h1 class="ft_clr"><font style="font-family: TheBlacklist">Gamer Registration</font></h1></b></center>
          </td>
        </tr>

        <tr>
          <td>Gamer Name</td>
          <td><input type=text name=textnames id="name" size="30" class="input_name"></td>
        </tr>

        <tr>
          <td>Gender</td>
          <td><input type="radio" name="gen" value="male" size="10" id="gen">Male<input type="radio" name="gen" value="Female" size="10" id="gen">Female</td>
        </tr>

        <tr>
          <td>City</td>
          <td>
            <select name="City" id="city">
              <option value="-1" selected>Country</option>
              <option value="uk">UK</option>
              <option value="usa">USA</option>
              <option value="india">India</option>
              <option value="russia">Russia</option>
            </select>
          </td>
        </tr>

      </table>
    </form>
  </div>

  <div id="sub" class="div2">
    <center><button id="b1" class="input_btn" onclick="setUsername()">Play</button></center>
  </div>

  <div id="display" class="div3" style="display: none">
    <center>
      <h1 class="h1_txt">Connecting to the Server..</h1>
    </center>
  </div>
</body>

</html>

＆＃13;

Answer 1

从中删除" body{ background-image: url('1st.jpg');" }

Answer 2

过时的方式

<verb id="v1" span="word_3" ref="sent_1"/>
<verb id="v2" span="word_7" ref="sent_1"/>
<verb id="v3" span="word_14" ref="sent_2"/>
<verb id="v4" span="word_27" ref="sent_4"/>

试试CSS

<body background="./1st.jpg">

验证图片的网址方向

 body{
      background-image: url('./1st.jpg');"
   }

Answer 3

我有同样的问题。如果我直接打开html但不是从nodejs打开html，那是可行的。我找不到简单的方法，但找到了替代解决方案。

尝试完整路径或
http链接（将图片上载到网络后）

HTML页面背景图像显示在节点js服务器中

3 个答案: