Menu
In the demo code below it uses data-src but no img src. How is the image applied? Does the javascript modify this somehow?
http://v4-alpha.getbootstrap.com/components/card/
<div class="card">
<img class="card-img-top" data-src="..." alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
333
src will render the value immediately and it's the default for images, videos using a single source and iframes. data-src is used when lazy loading to prevent the default image from loading when the page loads.
The <img> tag has two required attributes: src - Specifies the path to the image. alt - Specifies an alternate text for the image, if the image for some reason cannot be displayed.
The required src attribute specifies the URL of the image. There are two ways to specify the URL in the src attribute: 1. Absolute URL - Links to an external image that is hosted on another website.
Img src Not Working That means, when a web page loads, the browser has to retrieve the image from a web server and display it on the page. The broken link icon means that the browser could not find the image. If you've just added the image, then check that you included the correct image URL in the source attribute.
Bootstrap 4 documentation uses holder.js, see http://imsky.github.io/holder/
Also see: https://github.com/imsky/holder#usage
Include holder.js in your HTML:
Holder will then process all images with a specific src attribute, like this one:
The above tag will render as a placeholder 300 pixels wide and 200 pixels tall.
To avoid console 404 errors, you can use data-src instead of src.
Holder is included via http://v4-alpha.getbootstrap.com/assets/js/docs.min.js
59
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
