Error adding image inside table cell HTML - html

My image's link reference is break. But the image and the html file are in the same folder. And I think that this code is correct:
<td><img src="test.jpg" alt="" border=3 height=100 width=300></img></th>
This error occurs when I try to run my web application using eclipse, but I created a simple html file in the desktop and put the image there too, then it runs perfectly. Both codes are the same.
Code:
{{define "content"}}
<table>
<tr>
<td>Jill</td>
<td>Smith</td>
<td><img src="test.jpg" alt="" border=3 height=100 width=300 /></td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
{{end}}

As you are adding that by saving normal HTML file from desktop, it will work. But in other case, Code has to be as per its standard rule. And you were missing some. Please see below the correct way:
<td>
<img src="test.jpg" alt="" border=3 height=100 width=300 />
</td>
Also let us know if there is any path related issues.

You have a few issues with your code. You have tags open, but using the wrong closing tag. Try this:
<td><img src="test.jpg" alt="" border=3 height=100 width=300 /></td>
Also, it seems you are using HTML4 - very old.
Once you have it working, I suggest removing the border, height and width attributes and use CSS instead.

Related

Adding images to Readme of plugin in pub.dev

I have a plugin called UPI India in pub.dev whose readme contains two images. Both images are visible in Readme of Github but not in the Readme of pub.dev
Images in Pub
Images in Github
I am using absolute path in Readme.
<table>
<tr>
<td><img src="https://github.com/mdazharuddin1011999/UPI-Plugin-Flutter/blob/master/images/success.jpg" alt="Success Status" width="200"></td>
<td><img src="https://github.com/mdazharuddin1011999/UPI-Plugin-Flutter/blob/master/images/show.gif" alt="How example looks" width="200"></td>
</tr>
</table>
Does anyone know why this is happening?
Problem solved!
I used the cdn link instead of repository link.
<img src="https://user-images.githubusercontent.com/42082172/82893565-d3643480-9f6e-11ea-96a7-493181df6214.gif" alt="How example looks" width="300" height="540">
<img src="https://user-images.githubusercontent.com/42082172/82893023-1245ba80-9f6e-11ea-868d-a55062d34086.jpg" alt="Success Status" width="300" height="540">
Hope it helps someone in future.
There's a simpler way where you can try something like this:
<table>
<tr>
<td><img src="https://github.com/mdazharuddin1011999/UPI-Plugin-Flutter/raw/master/images/success.jpg" alt="Success Status" width="200"></td>
<td><img src="https://github.com/mdazharuddin1011999/UPI-Plugin-Flutter/raw/master/images/show.gif" alt="How example looks" width="200"></td>
</tr>
</table>
Just change the /blob/ to /raw/ in your Github url.

Visual Studio Could Not Reformat Line Due To Nested Image Tag in Achor Tag

When I try to reformat Visual Studio complains about a nested image tag I have in my html:
<table>
<tr>
<td style="width: 1480px">
<a href="#Url.Action("Index", "Home")"> //complains about this line.
<img src="images/myLogo.png" alt="" />
</a>
</td>
</tr>
</table>
The link and image work fine, but I was wondering where I may have written some bad html since Visual Studio refuses to reformat, thanks.
Try using single-quotes ' instead of double-quotes " for your href attribute :
<table>
<tr>
<td style="width: 1480px">
<a href='#Url.Action("Index", "Home")'>
<img src="images/myLogo.png" alt="" />
</a>
</td>
</tr>
</table>
This changes appears to be free of complaint in Visual Studio 2015 locally :
Double-quotes can often throw off the Razor View engine at times as it thinks that you are trying to write some C# inside of it.

Same HTML code works for some images and not others

I'm writing a simple website and cannot seem to figure out a small problem. Whenever I insert an image (all images are in an Images subfolder) I use the exact same image code. However, for some reason some of the images show up as broken links when I put the website on a server and access it that way. I access the exact same place from the server locally and the images look just fine. When accessed from the server through the internet only the first image in the table shows up. I know the files are not corrupted and every other reference throughout the website works just fine. Any thoughts?
Edit: The permissions are the same for every image in the folder. Read/Execute on all files.
<div id="headshots">
<table>
<thead>
<tr>
<th colspan="4" style="text-align:center">THE TEAM</th>
</tr>
</thead>
<tr>
<td><img src="Images/Example0.jpg" alt="****" /></td>
<td><img src="Images/Example1.jpg" alt="****" /></td>
<td><img src="Images/Example2.jpg" alt="****" /></td>
<td><img src="Images/Example3.jpg" alt="****" /></td>
</tr>
<tr>
<td style="text-align:center; color:white" bgcolor="#C59353">Example0</td>
<td style="text-align:center; color:white" bgcolor="#C59353">Example1</td>
<td style="text-align:center; color:white" bgcolor="#C59353">Example2</td>
<td style="text-align:center; color:white" bgcolor="#C59353">Example3</td>
</tr>
</table>
</div>
I am assuming that the main difference here is that locally you're using Windows while your server is using Linux. The main thing to look out for in Linux vs. Windows is case-sensitivity. Say, if one of your images is named example1.jpg or Example1.JPG, it will not work with your code.
I am almost certain that this is the solution to your problem, although it's actually more of a guess, so if you have additional information please post it here.

Outlook 2010 table spacing weirdness

When coding a HTML email newsletter Outlook 2010 is acting up. (surprise surprise)
The following screenshot is the result: http://screencast.com/t/PSZqP7wg
This screenshot shows what's happening (same, but images turned off): http://screencast.com/t/DrbexyHnytJ
Obviously, the middle white column is to narrow. Should be 604px wide, but is a lot less. It seems Outlook is placing extra padding next to the spacer images.
Anyone has an idea why this is happening?
This is the source in the body tag:
<table width="761" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3" height="151" style="height: 151px;" style="padding: 0px;"><img width="761" height="151" src="http://www.bothino.be/newsletter/top.jpg" alt="" /></td>
</tr>
<tr>
<td width="77" style="width: 77px;">
<img src="http://www.bothino.be/newsletter/spacer.jpg" width="77" alt="" />
</td>
<td width="604" bgcolor="ffffff">
test sdlkfjhklsdjfhqsdklfh qklsdfh klqsjf lqksjdf lkqsjdhf lkdflkqshdfkl jqhsdlkfj
hqslkdfh qlksjdfh lqskjdhf lkqjshdlfk jqhsldkfh qlsdjfh lqksjdflk qsdflkqshdklfh
klqshdf kqshdklf hqskldfqklsd
</td>
<td width="76" style="width: 76px;"><img src="http://www.bothino.be/newsletter/spacer.jpg" width="76" alt="" /></td>
</tr>
<tr>
<td height="151" colspan="3">
<img width="761" height="151" src="http://www.bothino.be/newsletter/bottom.jpg" alt="" />
</td>
</tr>
</table>
You just need to add a background color to both tags. the widths are displaying correctly.
I'm used to issues with "undefined" blank spaces and line breaks in IE and Outlook. They are usually interpreted as a real, wanted space, formatted by style of the nearest parent (if any).
That's why i prefer writing htm like this:
<tr>
<td height="151" colspan="3"><img
src="http://www.bothino.be/newsletter/bottom.jpg"
width="761" height="151" alt="" /></td>
</tr>
Line breaks inside a tag will make no difference at display time ... but apply a similar structure to the code.
The important part is no blank between TD and IMAGE tag.
Maybe, this doesn't explain and solve that huge indentions in your screenshot.
my experience with Outlook is to never ever never ever use the rowspan and colspan attributes. This is guaranteed to cause trouble. Should a table cell require a different layout/width than the one above/below it, nest another right into it with the correct layout. this way the overall basic grid stays intact. Not nice, but then again: outlook plays dirty and so will you (have to). All tables need to have cellpaddign=0 and cellspacing=0. This helps me to get over similar issues.
sometimes it's better to leave out width for td's eg leave out width=77 and rest of width for all td's. that way it can expand automatically to fill the entire row. or you can also include a table withing that tr.

What's wrong with my table?

Here is the code for the table:
<table align="center" width="303" height="740" border="1" cellpadding="10">
<tr>
<th width="130" height="41" scope="col">URL1 - Normal</th>
<th width="121" scope="col">URL2 - Hover</th>
</tr>
<tr>
<td height="94"><img src="http://i1018.photobucket.com/albums/af309/5416339/ad-green.png"/></td>
<td><img src="http://i1018.photobucket.com/albums/af309/5416339/ad-green-h.png" alt=""/></td>
</tr>
<tr>
<td height="124"><img src="http://i1018.photobucket.com/albums/af309/5416339/ad-blue.png" alt=""/></td>
<td><img src="http://i1018.photobucket.com/albums/af309/5416339/ad-blue-h.png" alt=""/></td>
</tr>
<tr>
<td height="147"><img src="http://i1018.photobucket.com/albums/af309/5416339/ad-grey-h.png" alt=""/></td>
<td><img src="http://i1018.photobucket.com/albums/af309/5416339/ad-grey.png" alt=""/></td>
</tr>
<tr>
<td height="137"><img src="http://i1018.photobucket.com/albums/af309/5416339/ad-pink.png" alt=""/></td>
<td><img src="http://i1018.photobucket.com/albums/af309/5416339/ad-pink-h.png" alt=""/></td>
</tr>
<tr>
<td height="132"><img src="http://i1018.photobucket.com/albums/af309/5416339/ad-red.png" alt=""/></td>
<td><img src="http://i1018.photobucket.com/albums/af309/5416339/ad-red-h.png" alt=""/></td>
</tr>
<tr>
<td height="132"><img src="http://i1018.photobucket.com/albums/af309/5416339/ad-black.png" alt=""/></td>
<td><img src="http://i1018.photobucket.com/albums/af309/5416339/ad-black-h.png" alt=""/></td>
</tr>
</table>
When I insert the table, it leaves a gap in-between the table and the text. If I remove the table, then everything is fine. What's going wrong here?
Blogspot inserts line breaks for you... and they push the table down. (I haven't found a workaround yet.)
If you view the source, you can see them:
<table align="center" width="303" height="740" border="1" cellpadding="10"><br />
<tr><br />
<th width="130" height="41" scope="col">URL1 - Normal</th><br />
<th width="121" scope="col">URL2 - Hover</th><br />
</tr><br />
<tr><br />
<td height="94"><img src="http://i1018.photobucket.com/albums/af309/5416339/ad-green.png"/></td><br />
...
Because the BRs are invalid when directly inside a TABLE, TR, or after a TH or TD, the browser pushes those elements out of and above the table when rendering the DOM.
If you take a look at the source of the page, you'll notice a TON of <br/> tags interspersed with your table (but not contained in cell elements). They are rendered above the table.
It looks like your HTML is being parsed by something, and your line-breaks are being replaced with BR tags.
Quick solution: remove all linebreaks and just have the table code on one line :)
It has nothing to do with the table. It's the fact that there are 31 <br> (line break) tags before the table (which are what are creating the huge gap.
It sounds like BlogSpot (or whatever blog service you are using) is adding extra <br> tags based on how you're formatting the rest of your content. Edit the source of the page if possible and manually remove them...otherwise it becomes a support issue with whatever blog platform you're on.
This has nothing to do with anything in your table markup. Viewing the HTML source of that page shows about 30 <br> tags ahead of the table. They are obviously responsible for the extra space.
Why you get 30 <br> tags when inserting a table must have something to do with how blogspot.com is formatting your content. Your best bet is to try editing the HTML by hand to remove the <br> tags. If you can't do that, or if the <br> tags don't show up when editing the HTML, it's a question for customer service at Blogspot.