I embedded several images into my HTML email template using the syntax below.
<figure id="keyboardimg">
<img src="/img/keyboard.jpg" alt="Keyboard image" title="Keyboard image">
</figure>
I used both of the following "hypertext references" to link the images to the HTML email template but the images are not showing. Any advice on how to address this issue will be really appreciated.
https://pnivar.imgbb.com/
https://ibb.co/L6SYdwz
You were using "relative URLs." They assume that the image is found on the same server as the document. When the document is served by email, the image is not on the email server, and the relative URL doesn't work. When sending an email, you need to reference all resources (including images) using absolute URLs.
<figure id="keyboardimg">
<img src="https://i.ibb.co/nfr6M2s/Modern.jpg" alt="Keyboard image" title="Keyboard image">
</figure>
I have a problem with linking images and links from HTML file to another HTML file .
The only way I have to link links or images is this way:
from one html to another:
<a class="navbar-brand" href="/index.html">Logotype</a>
of a photo:
<img src="/photos/mouse.png" class="img-fluid rounded mx-auto d-block mt-5" alt="about us">
My question was how do I not use the forward slash on all the links. I am a student and my teacher is forcing me to remove that slash from all links. And if I remove it, it doesn't work, nor does the link to the CSS work.
Put all the photos in same folder. Then you would not need to give / before the file name.
Like this:
<img src='myphoto.jpg'/>
I am using external links for some images in my app. Links are ok, anchor tag works and it moves me to the exact raw image. The issue is that src of the image display broken image link icon;/
<img src="#img.Url" loading="lazy" style="max-width: 80%">
Image Original Link
Could someone help me?
<img src="#" alt="Sorry the image could not be displayed.">
In the above code I want display an image in alt instead of text.In this way I want to display my site logo as image if it is unable to connect to internet.
Update:I am developing android application using Phonegap.
As stated in the comments - If your user doesn't have an internet connection, there's no way they can load a new image. However, if it's of any use to you and you wanted to load in placeholders for whatever reason.
You could do something like this with jQuery
I've set up a basic fiddle for you which is easy enough to understand.
Image With # Src
<img src="#" alt="no image" />
Variables to find # Src and to replace with placeholder
var noSrc = '#';
var noImg = 'http://placehold.it/400x500';
$('img[src="' + noSrc + '"]').attr('src', noImg);
Just change the path of the noImg variable to whatever your image path will be.
Working Example: Fiddle
<img src="#" alt="no image" />
$('img[src="#"]').attr('src', 'http://placehold.it/400x500');
Example without Variables: Fiddle 2
I've started using Bootstrap for a project, and in particular, the Thumbnails component. On the thumbnails example on the documentation, the following sample code is shown:
<ul class="thumbnails">
<li class="span4">
<a href="#" class="thumbnail">
<img data-src="holder.js/300x200" alt="">
</a>
</li>
...
</ul>
Notice the use of data-src to replace the usual src attribute on the <img> tag.
I assumed that to get my thumbnails working, I should use data-src instead of src for the images, but that does not seem to be the case. I've only been able to load images by defining the src attribute. It seems others are having the same problem.
Is this a typo in the documentation, or did I not understand correctly how to use data-src?
I believe that the only reason of why bootstrap guys are using data-src instead src, it's because of holder.js. You should use src instead of data-src because data-src is only used for the javascript library that generates the example images of a certain size, and src is the normal attribute for specifying the location of an image (Source: W3C)
Why are they using in the documentation data-src? I suppose that even the syntax <img src="holder.js/100x200"></img> is accepted by the library as it is in the holder.js documentation, when we access to the page it throws a 404 error in the image even when the image is displaying, because there is not any file in the specified path, what it's weird.
Why do they put that in the documentation code? I really don't know. Probably it's a mistake. But I am sure that you should use src instead data-src in thumbnails.
How to use it
Include holder.js in your HTML:
<script src="holder.js"></script>
Holder will then process all images with a specific src attribute, like this one:
<img src="holder.js/200x300">
The above tag will render as a placeholder 200 pixels wide and 300 pixels tall.
To avoid console 404 errors, you can use data-src instead of src.
Holder also includes support for themes, to help placeholders blend in with your layout. There are 6 default themes: sky, vine, lava, gray, industrial, and social. You can use them like this:
<img src="holder.js/200x300/industrial">
Bootstrap uses Holder for thumbnails in its documentation.
It's pretty well explained on the Holder github page.
Include holder.js in your HTML. Holder will then process all images with a specific src attribute... The tag will render as a placeholder. To avoid console 404 errors, you can use data-src instead of src.
In order for me to get this to work, I had to call the run() function in holder.
I am using require to load backbone views, inside my view I include holder
var Holder = require('holderjs');
Then inside render I can run
Holder.run();
And in my template I have
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img data-src="holder.js/200x200/text:hello world">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p>Button Button</p>
</div>
</div>
Hope that helps.
I couldn't figure it out either, as far as I understand it holder.js is actually a completely separate js file to act as an img placeholder from http://imsky.github.io/holder/
data-src is used to pass to the javascript, the /100x200 is the dimension of the picture you want the javascript 'holder.js' to take up for the real img.
I think the idea is to prototype using this (data-src="holder.js/300x200") and then replace it with sized pictures (src="Logo.png") afterwards.
For future Googlers looking for how to use with NPM/build jobs this worked in my case:
window.Holder = require('holderjs').default;