CODEWITHSUNDEEP
javascripthtmlnode.js
LisaJoseph
LisaJoseph

Reputation: 63

html is not rendering my image and the source is correct

I am trying to make the image "id = image" appear but it wont show up. I have done it with a simpler version where all i had was the body and the image tag and it worked but it wont appear in this format

<!DOCTYPE html>
  <html>
    <head>
      <script type="text/javascript" src="index.js"></script>
      <title>Text To Gif</title>
      <script src="//www.WebRTC-Experiment.com/RecordRTC.js"></script>
    </head>

    <script src = "/socket.io/socket.io.js"></script>
    <script>
      var socket = io();
      function onClicked() {
      socket.emit('record');
      socket.on('message', function(data){ 
      document.getElementById('transcript').innerHTML = data; });
      var downloadButton = document.getElementById("search_button");
      var counter = 11;
      id = setInterval(function() {
        counter--;
        if(counter < 0) {
          downloadButton.innerHTML = "Record";
          document.getElementById('transcript').innerHTML = "";
          clearInterval(id);
        } else {
          downloadButton.innerHTML = counter.toString();
        }
      }, 1000);
    }
  </script>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
  <link rel="stylesheet" href="https://fonts.googleapis.com/cssfamily=Montserrat">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/font-awesome.min.css">
  <style>
    body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif}
      .w3-bar,h1,button {font-family: "Montserrat", sans-serif}
         .fa-anchor,.fa-coffee {font-size:200px}
  </style>

  <body>

  <!-- Header -->
    <div class="w3-container w3-red w3-center" style="padding:250px 16px">
      <h1 class="w3-margin-small w3-jumbo">Click Below To Start</h1>
      <button type="button" onclick="onClicked();" id="search_button" class="w3-button w3-black w3-padding-large w3-large w3-margin-top">Record</button>
      <p id="transcript"></p>
      <img src="C:/Users/vlisn/Documents/speechapi/texttogif/images/cokelogo.png" 
         id="image" width="110" height="107">
    </div>
  </body>
</html>

can you help me out? i think it has to do with the code around it not the image tag

Upvotes: 1

Views: 518

Answers (1)

Ted
Ted

Reputation: 570

I've edited your question because oh my god my eyes.

Now that I've done it, I see tons of flaws in your HTML. You have <meta> tags that are outside your <head> and they can't/shouldn't be. You are also loading <link> outside of it.

Now partially, the issue with rendering could be because you are using a flat out path with C:/Users/vslin...... Try creating a folder called images in the same level as your HTML file and copying the image inside there, and then just using something like src="images/cokelogo.png".

It should be working, so the only reasons that seem viable are that you have the HTML file broken with the <link> and metas outside the <head>, or because of the absolute file pathing instead of relative one.

Edit: As per @LisaJoseph 's comment, it really seems like the absolute path is the issue here. Running on a server, you can't do src="C:/User/...." simply because those folders do not exist in your server. What you need to do is relative paths, as such:

- ServerFolder
 |- index.html
 |- images/
     |- cokelogo.png

And with this structure, you can then just do

<img src="images/cokelogo.png">

And the server will find it.

Upvotes: 2

Related Questions