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"
Related
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.
Hi I'm working on an email for a company in HTML. They want me to display a png image with transparency but for some reason when I try it shows up like it can't find or load it. I've made sure to copy the specific source in sublime yet it still doesn't work. Is there a problem with .pngs in html? The .jpg is working fine.
a picture showing my png failing to load
if it's relevant, I'm using the foundation framework.
<body>
<table class="body" data-made-with-foundation>
<tr>
<td class="float-center" align="center" valign="top">
<center>
<table class="container">
<table class="row">
<tr>
<th class="small-12 large-12 first columns">
<div class="imgbox">
<img class="mainimage" src= "assets/links/KDIemail1-bg.jpg" />
<div class="ricohtop">
RICOH CUSTOMERS
</div>
<img class= "toplogo" src="/assets/Links/kdi-toplogo.png" >
</div>
</th>
<th class="small-12 large-6 first columns">
</th>
<th class="expander"></th>
</tr>
</table>
</table>
</center>
</td>
</tr>
</table>
</body>
Edit: I'm an idiot. It was being blocked by the red div and there was a sass error I didn't notice. Thanks to everyone who answered I kinda wasted your time though haha!
<img class="mainimage" src= "assets/links/KDIemail1-bg.jpg" />
<img class= "toplogo" src="/assets/Links/kdi-toplogo.png" >
Your second image is missing a / and the src has a extra / at the start. Also Links is capitalized.
Please try this fix
<img class= "toplogo" src="assets/links/kdi-toplogo.png" />
Try removing the leading slash / from the PNG image path.
On Unix-based systems (e.g. macOS, Linux, etc) a leading / indicates a path from the file system root. In your HTML, I believe you need instead a relative path (i.e., one without the leading /).
As correctly noted by NewbLeech, might be a good idea to close your <img> tag as well.
I have issues with data values in a table and I'm trying to wrap the data in anchor tags so that it can be a downloadable link i tried to use ng-href but i can use target. is there an easier way of doing this? i was the data to show normally on the browser and have use click on it to download an image. but it shows an ugly anchor tag as well :/ this is my code with normal a href
i have tried using this as well, which was an answer for angular.js link behaviour - disable deep linking for specific URLs
<td><a target="_self" href="//tomcmmsweb.pca.com/DocumentLibrary/Download/{{item.documentId}}">{{item.jobNumber}}</a></td>
but above still didnt work. im using angularJS 1.2.16, im running out of ideas and im notthat much of an expert with angularJS. would really appreciate some knowledge.
<table class="table table-striped table table-hover">
<thead>
<tr>
<th>Project Manager</th>
<th>Job Number</th>
<th>Description</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in counce">
<td>{{item.projectManager}}</td>
<td>{{item.jobNumber}}</td>
<td>{{item.description}}</td>
<td>{{item.totalAmount*1000 | currency}}</td>
</tr>
</tbody>
</table>
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.
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>