Фоновое изображение HTML-страницы отображается на сервере node js

Это мой html файл. Файл 1st.jpg находится в той же папке. Но по-прежнему не загружается на сервер. Я не понимаю, что мне делать. Я пробовал использовать встроенный CSS, встроенный CSS, а также внешний CSS.

При отладке они показывают, что изображение не загружается.

Код:-

//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.info("here-->", user)
  socket.emit('req', data);
};

.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');
}

<!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>

Откройте в браузере инструменты разработчика. Посмотрите на вкладку «Сеть». Ищите запрос на фоновое изображение. Ищите ответ. Вы их ожидаете?

— 29.05.2018 16:40

html css node.js

29.05.2018 14:15

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

2 528

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Убрать " из body{ background-image: url('1st.jpg');" }

Фактически, это не сработает независимо от использования узла.

— 29.05.2018 14:47

29.05.2018 14:45

устаревший способ

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

попробуйте CSS

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

Проверьте направление URL-адреса изображения

// Folder Up    
"../image.jpg"

// same folder of CSS in this case
"image.jpg"

// Root direction
"/image.jpg"

Я пробовал оба пути. Он работает, если я запускаю только HTML-страницу. Но когда я открываю эту HTML-страницу с помощью сервера node js, в это время фоновое изображение не работает.

— 30.05.2018 05:36

29.05.2018 17:31

Ответ принят как подходящий

У меня была такая же проблема. Он работал, если я открывал html напрямую, но не из nodejs. Я не мог найти простой способ, но нашел альтернативное решение.