I am learning Blazor and at the moment I am trying to set an image as the background. I thought I would try display it first as the background-image css didnt work. I have attached a picture of my index.razor page and the img tag i am using is as follows:
<img src="file:///C:/Development/CsharpApplications/Portal/AlbertBartlettPortal/AlbertBartlettPortal/Pages/hero-range-1.jpg" alt="Background Image" />
It allows me to ctrl+click the file path and opens the image right away so it can see the image, but it wont display at all when the website is ran.
HELP!
Page Image Here
I put it in wwwroot\images and then used src="images/aaa.jg". No leading / OR ~/
I have a basic custom Pin it button. This picks up images inline to the page, but it's not picking up images using the HTML5 picture element with srcset.
<img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_red_28.png" />
Here's an example of the picture element in use, where the button is not working:
<picture>
<img srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/coffee5.jpg">
</picture>
A very stripped down demo to play with that illustrates the problem: http://codepen.io/michaelpumo/pen/eZyddp
Any ideas?
Update: I might actually have to add that my usecase is a bit more complicated than this. The above is a simplified / stripped down version to illustrate the point. I'm lazy loading these too you see.
Please use the following. It works.
<picture>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/coffee5.jpg" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/coffee5.jpg" data-pin-description="Hello World">
</picture>
I thought src and description should be there for Pinterest.
I am trying to add a Pin it button on a blog page. AddThis widgets are being used for this.
But when I try to use the PIN functionality then it is not choosing all the images on my page.
The image tags are as below
-- Getting Pinned
<img src="images/blog/123_3710961211.jpg" class="blog-main-img">
-- not Getting Pinned
<img src="data:image/png;base64,v2nv1jcqS/VEhanlIJN8hnyDHoT4Z8FfAhX/g8EI9yHfLfPFQAAAA
BJRU5ErkJggg==" data-filename="Victor Vasarely positive negative space pic.png"
style="width: 521px;">
Let me know what is the error? Is it that Pin does not include Data images?
I have tried using another widget also but same result there.
I read somewhere that img size should be at least 100×200 but all my pics are greater than that.
pinterest does not support pinning from base64 images, you should be able to set a meta tag to an actual image not displayed on the page however
<meta property="og:image" content="http://example.com/pic.jpg" />
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;
Given the following link to an image:
Title
What is the most semantically sound method for indicating the location of a thumbnail?
The best I could come up with so far is using data- attributes like so:
Title
However, it doesn't seem very semantically sound. Is there a better or more correct way to do this?
Why not use an <img> element? You can give it a class to indicate that it's a thumbnail and hide it with progressive enhancement if you need to. That way, the thumbnail of the image will be shown in the absence of JavaScript/CSS:
<a href="path/to/img.jpg">
<img src="path/to/thumbnail.jpg" class="thumb" alt="Thumbnail" />
Title
</a>
Or am I being too naïve?
Title
Simple and keeps the original path intact while just adding a suffix to indicate that the image is a thumbnail. We use this all the time on our sites and it makes things easy.