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.
Related
I am trying to show an image in a table but the image is not loading, when I try to access it from the browser it works just fine. Here is the code:
<table class="table table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Image</th>
<th>Category</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td style="float: left">Broiled Steak Kebabs With Orange Slush</td>
<td><img src="/var/www/html/Project-Intelligent/uploads/Broiled Steak Kabobs With Orange Relish.jpg" height="50px" width="50px"></td>
<td>BarBeCue</td>
<td>Delete Edit</td>
</tr>
</tbody>
</table>
I have tried to change permissions to 777 but even doing this does not help.
Absolute paths on web servers are relative to the directory being served by the server. If that directory is, say, /var/www/html, all absolute paths in client facing code should be relative to that.
Example:
To display /var/www/html/images/image.png on a server serving out of the directory /var/www/html using an absolute path:
<img src="/images/image.png">
Or using a relative path, given the HTML file is in /var/www/html:
<img src="images/image.png"> or <img src="./images/image.png">
The img src is relative to the html file.
Based on the folder structure, I'm guessing your page is in the html folder, so the IMG src should be "Project-Intelligent/uploads/Broiled Steak Kabobs With Orange Relish.jpg"
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.
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.
I have a website with thumbnails that link to pictures in a new tab. For whatever reason some of them work and some of them don't. Is this most likely a problem with my schools web server? I'll link the code here as well as the website.
Here is the website
If you scroll down to the second part of this photo gallery you will notice that some of these thumbnails are not working and when you click them the full image does not show up either. Using filezilla I copy and pasted from my PC into the server all at once. So I feel like there may be something I'm missing in the code. At the same time however the code is exactly the same except with different names so I have no idea whats going on. If you see any coding issues please let me know otherwise I will just assume it is a problem with the schools web server.
And here is some of the code.
<tr>
<td><img src="images/tn_quiltexample1.jpg" alt="Quilt Example"></td>
<td><img src="images/tn_quiltexample2.jpg" alt="Quilt Example"></td>
<td><img src="images/tn_quiltexample3.jpg" alt="Quilt Example"></td>
<td><img src="images/tn_quiltexample4.jpg" alt="Quilt Example"></td>
</tr>
<tr>
<td><img src="images/tn_quiltexample5.jpg" alt="Quilt Example"></td>
<td><img src="images/tn_quiltexample6.jpg" alt="Quilt Example"></td>
<td><img src="images/tn_quiltexample7.jpg" alt="Quilt Example"></td>
<td><img src="images/tn_quiltexample8.jpg" alt="Quilt Example"></td>
</tr>
From the code I linked. Quiltexample 3, 4, and 5 are not showing up.
Your 3 images that are missing have uppercase file extensions and the web server being used is configured to respect case sensitivity.
These urls work:
http://rnissen.myweb.usf.edu/images/quiltexample3.JPG
http://rnissen.myweb.usf.edu/images/quiltexample4.JPG
http://rnissen.myweb.usf.edu/images/quiltexample5.JPG
You can also just access them without the extension.
http://rnissen.myweb.usf.edu/images/quiltexample3
http://rnissen.myweb.usf.edu/images/quiltexample4
http://rnissen.myweb.usf.edu/images/quiltexample5
I am trying to get this table on my site to have an image on the left and information about the staff member on the left. It is in a WordPress page but regardless of weather it's on the page or in a standalone HTML document it doesn't seem to render the way I want it to.
It's supposed to follow the same general idea as http://grab.by/djQk.
I attempted to copy their source but couldn't get it to render so I pulled their source from my site and started from scratch and still couldn't get it working.
http://radio.powercastmedia.net/staff/
I have implemented what you need using CSS instead of tables.
See this JSFiddle
Cheers, Sam
If you're using tables....
<table>
<tr>
<td style="width: 25%;">
<img src="blah"/>
</td>
<td>
<table>
<tr>
<td>Blah</td>
<td>Blah</td>
</tr>
<tr>
<td>Blah</td>
<td>Blah</td>
</tr>
</table>
<td>
</tr>
</table>
Note: the problem with your pastebin example is that you're using <tr> inside a <td> which is incorrect - <tr> can only go inside a table so you need additional table tags.
It's also possible to do with a single table using colspan and rowspan on individual cells, but I'd personally prefer to do it by making the image a float left eg:
<div>
<img src="blah" style="float: left;"/>
<p>Name: John</p>
<p>Something else</p>
</div>