Question

使用socket.io并为显示一些图像文件的客户端网页编写html。图像保存在与html文件位于同一目录中的文件夹中，因此代码如下所示：

<!doctype html>
<html>
<head>
  <title>Project</title>
  <style>
  #div {margin-top: 250px; }
  #caption {font-size: 20px;}
  </style>
</head>
<body>

  <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
  <script src="/socket.io/socket.io.js"></script>

  <div id = 'div'>
  <center>
    <form action=''>
      <p id='caption'>Choose a pdf to display:</p>
      <div id='picButton'>
        </div>
      <img src="https://66.media.tumblr.com/9d57f22c90ac0c291a7a21a73d10d308/tumblr_oa9bl6o3rF1qgon18o1_540.jpg"></img>
    </form>
    <ul></ul>
  </center>
  </div>
  <script>
    for(var i=1; i<=2; i++) {
      var path = "/Media/0"+i+".jpg";
      $('#picButton').append($('<img>').attr("src", path));
    }
  </script>

但是，我一直收到图像文件的404 not found错误。我应该将图像保存在其他位置吗？我试图找出保存它们的正确位置，因为html文件应该以某种方式引用带有<script src="/socket.io/socket.io.js"></script>的socket.io.js文件，但是将测试图像文件移动到socket.io node_modules文件夹中的-client文件夹仍无法帮助。

Answer 1

我删除了你用tumblr图像放置的img标签（将其下载到我的Media文件夹中）。我修改了删除正斜杠的路径，使其成为相对路径，并且工作正常。

我还修改了所有HTML属性，使用双引号和JavaScript来使用单引号。

我修复了标签，因为它不再支持HTML5。

<!DOCTYPE html>
<html>
    <head>
        <title>Project</title>
        <style>
            #div {margin-top: 250px; }
            #caption {font-size: 20px;}
        </style>
    </head>
    <body>
        <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
        <script src="/socket.io/socket.io.js"></script>
        <div id="div" style="text-align:center;">
            <form action="">
                <p id="caption">Choose a pdf to display:</p>
                <div id="picButton"></div>
            </form>
            <ul></ul>
        </div>
    <script>
        for (var i = 1; i <= 2; i++) {
            var path = 'Media/0' + i + '.jpg';
            $('#picButton').append($('<img>').attr('src', path));
        }
    </script>
</body>

只要你在与这个HTML文件相同的目录中有一个Media文件夹，并且你在该文件夹中有01.jpg和02.jpg，那么这将正常工作。

socket.io：尝试在我的客户端文件中引用图像文件

1 个答案: