HTML won't display 2 images

Question

I want to display 2 images on the same row like this:

Image  Same Text  Image

If I put one image it works, but if I put both of them I get 404. I think I am doing something wrong in the code I don't have much experience with HTML and don't know what I am missing. The files are in same folder. Here is the code:

<td colspan="8" >
<h1>
<img src="/home/apps/myapp/dynamic/img/myimage1.png" style="float:left; " alt="This is my mage" height="130" width="455">
<b>Same text</b>
<img src="/home/apps/myapp/dynamic/img/myimage2.png" style="float:right; vertical-align:middle;" alt="My second image" height="130" width="454"></h1>
</td>

Also, are you sure you want both images to be wrapped in a `h1`? And that table, are you using it for tabular data or layout purposes? — domsson, Dec 04 '17 at 11:33
If you receive a 404 error the path to your image must be incorrect. — Turnip, Dec 04 '17 at 11:36
@Christian in that case you might want to avoid using a table. See [this SO question](https://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html) for some reasons. — domsson, Dec 04 '17 at 11:37
Looks like incorrect image path... please check if the path is correct. — Muthu Kumaran, Dec 04 '17 at 11:37
I checked it and it's correct. If I display only one image it works. But if give the same path to both of them it returns 2 404 — Christian, Dec 04 '17 at 11:39

score 3 · Answer 1 · answered Dec 04 '17 at 12:24

simply you can use bootstrap.. divide the page into 2 halves using col-md-6 and put your data in its individual divs

   <div class="container">
    <div class="row">
     <div class="col-md-6">
      <img src="/path1">
     </div>
    <div class="col-md-6">
     <img src="/path2">
    </div>
   </div>
  </div>

score 0 · Answer 2 · answered Dec 04 '17 at 11:34

0

There is an extra start tag in your code, which is giving the error.

The Problem:

<<img src="/home/apps/myapp/dynamic/img/myimage2.png" 
style="float:right; vertical-align:middle;" alt="My second image" 
height="130" width="454"></h1>

The Solution

<img src="/home/apps/myapp/dynamic/img/myimage2.png" 
style="float:right; vertical-align:middle;" alt="My second image" 
height="130" width="454"></h1>

answered Dec 04 '17 at 11:34

AddWeb Solution Pvt Ltd

21,025
5
26
57

1

That wouldn't cause a 404 error. The extra `<` would just be interpreted as a text node. – Turnip Dec 04 '17 at 11:34
@Turnip, yes you are right. Actually, such HTML error will not give 404 error. For that more clarity on the requirement or test case is needed. – AddWeb Solution Pvt Ltd Dec 04 '17 at 11:36

score -1 · Accepted Answer · answered Dec 04 '17 at 11:36

-1

You can do by creating a nested table.

<td>
  <table width="100%">
    <tr>
      <td>Image 1</td>
      <td>Text</td>
      <td>Image 2</td>
    </tr>
  </table>
</td>

or you can do by creating div with float attributes. Do image1 and text to float:left; and image2 to float:right.

answered Dec 04 '17 at 11:36

Naveed Ramzan

3,565
3
25
30

I think the issue isn't the placement (at least not yet), but rather the 404 error he gets. – domsson Dec 04 '17 at 11:38
As per his question statement, issue is with placement as he is not good in HTML. – Naveed Ramzan Dec 04 '17 at 11:39
Actually, it reads _"If I put one image it works, but if I put both of them I get 404."_ and doesn't mention any issues with placement. However, OP accepted this answer, so apparently you are right. Me, I'm confused. – domsson Dec 04 '17 at 11:49

HTML won't display 2 images

3 Answers3