I'm trying to make a picture element work but it doesn't load the fallback img
<div class="card">
<picture>
<source type="image/png" srcset="https://company-dev.s3.amazonaws.com/carscan/https://lorempixel.com/250/250/transport/?66555">
<img class="card-img-top scale-on-hover" alt="Fallback" src="http://carscan.test/storage/images/no_image_found.jpg">
</picture>
<div class="card-body">
<h6><strong>Location</strong>: Door LB</h6>
<p><strong>Type</strong>: Window Crack <br>
<strong>Severity damage</strong>: Medium</p>
</div>
</div>
In my browser I get a 403 on the source (aws) element, but then I expect it to go to the fallback image. But instead it shows me the little img icon together with my alt text
When I remove the source item out of the element my img element is shown without any problems. Am i forgetting an element or a small character?
Try this as an alternative
<p>
<object data="https://company-dev.s3.amazonaws.com/carscan/https://lorempixel.com/250/250/transport/?66555" type="image/png">
<img src="https://cdn.sstatic.net/Img/unified/sprites.svg?v=e5e58ae7df45" alt="Stack Overflow logo and icons and such">
</object>
</p>
Related
So I'm trying to display multiple images using the picture tag and whatever I do, the pictures I'm trying to display doesn't seem to appear at all, I don't know what's the problem so I don't know how to fix it.
<div class="container">
<div class="pic">
<picture>
<source media="(min-width: 600px)" srcset="images/gallery-01.png">
<source media="(min-width: 900px)" srcset="images/gallery-02.png">
<source media="(min-width: 1100px)" srcset="images/gallery-03.jpg">
</picture>
</div>
</div>
<img> element is required, <source> is optional
Your snippet doesn't have any <img> tag, which is required. <source> elements are optional, which might occupy the space presented in <img>
Accodring to MDN page:
The <picture> HTML element contains zero or more <source> elements and one <img> element to offer alternative versions of an image for different display/device scenarios.
The browser will consider each child <source> element and choose the best match among them. If no matches are found—or the browser doesn't support the <picture> element—the URL of the <img> element's src attribute is selected. The selected image is then presented in the space occupied by the <img> element.
See the updated snippet below. The only change here (except the picsum.photos placeholder images) is the addition of <img> tage. In this example, the /300 image will be shown by default, but if/when the browser supports the <picture> element and certain media query matches a particular <source> image will replace the default image.
<div class="container">
<div class="pic">
<picture>
<source media="(min-width: 600px)" srcset="https://picsum.photos/200">
<source media="(min-width: 900px)" srcset="https://picsum.photos/400">
<source media="(min-width: 1100px)" srcset="https://picsum.photos/600">
<img src="https://picsum.photos/300" alt="" />
</picture>
</div>
</div>
Are you %100 sure that your srcset= "images/gallery-01.png" leads to the correct image?
If that's not the problem then I would recommend trying <img src="images/gallery-01.png">. Here's the full code,
<div class="container">
<div class="pic">
<picture>
<img alt="Image1" src="images/gallery-01.png">
<img alt="Image2" src="images/gallery-02.png">
<img alt="Image3" src="images/gallery-03.jpg">
</picture>
</div>
</div>
I am using picture element to provide webP images where appropriate like this:
<picture>
<source srcset="picture.webp" type="image/webp">
<source srcset="picture.jpg">
<img src="picture.jpg" alt="alt">
</picture>
The questions is where should I place title attribute. Should I put it on img element or picture element?
I disagree with the previous posters. I would keep the title on the img element.
According to the HTML5 spec's, the picture element is a container, and dependent on the img element for rendering of its source element choices. In fact, the img element is a requirement for picture, not just as a fallback. Therefore, picture is just a hollow wrapper around img and really doesn't do anything. img remains the primary conveyor of images.
The HTML specification goes on to say...
The picture element is a container which provides multiple sources to
its contained img element...
...and then
...the picture element itself does not display anything; it merely
provides a context for its contained img element that enables it to
choose from multiple URLs
That means the img element continues to represent the image and so in my opinion must have the title element. The fact that the img element's alt still works and title, even when a source image is chosen over img by the browser, shows the image element is what is active in the display. Below is an example of how I design images using the picture element.
<figure aria-labelledby="picturecaption1">
<picture id="picture1">
<source srcset="image.webp" type="image/webp" media="(min-width: 800px)" />
<source srcset="image.gif" type="image/gif" />
<img id="image1" alt="image:Image Alternate Text" title="The Image Description" src="image.jpg" width="200" height="200" loading="lazy" no-referrer="no-referrer" />
</picture>
<figcaption id="picturecaption1">My Image Caption</figcaption>
</figure>
You should place title attribute in picture tag because The <picture> tag also supports the Global Attributes in HTML.
E.g.
<picture title="Your goes here">
<source srcset="picture.webp" type="image/webp">
<source srcset="picture.jpg">
<img src="picture.jpg" alt="alt">
</picture>
I'm in the process of converting our images to webp, which means I need to use the 'picture' tag instead of 'img', as picture allows for a fallback to png formats for devices and browsers that don't support webp.
Anyway, I have an img that looks like this:
<img class="usp-pics pic1" src="/images/example.png" alt="" title="">
So, converting this to webp with the ability to fallback to png would look something like this:
<picture>
<source srcset="/images/example.webp" type="image/webp">
<source srcset="/images/example.png" type="image/png">
<img class="usp-pics pic1" src="/images/example.png" alt="" title="">
</picture>
If a browser reads the above code and takes the first webp image, will it also apply the classes, alt & title tags attached to the img element or do I need to repeat them for each source, or add them to the parent picture tag?
I've tried to look this up but I can't find an answer. Maybe because it's obvious or maybe because I'm using the wrong words to describe the issue. Sorry if this has already been covered somewhere.
Acccording to MDN the <picture> element simply takes the content of the <source> and puts it inside the space defined by the <img> tag:
The browser will consider each child <source> element and choose the best match among them. If no matches are found—or the browser doesn't support the <picture> element—the URL of the <img> element's src attribute is selected. The selected image is then presented in the space occupied by the <img> element.
(My emphesis)
Therefore, I would expect that the classes on the <img> tag would still appear to the end user, regardless of which (or any) <source> material is used.
My Testing:
But I had not checked this. So I decided to run a few tests with image types (PNG / JPG / Webp) and <picture> elements:
.one {
border: 3px solid #f00;
}
.two {
border: 3px solid #0f0;
}
.thr {
border: 3px solid #00f;
}
.fou {
/* Picture Element */
border: 3px solid #333;
display: inline-block;
}
<picture class='fou'>
<source srcset="https://www.gstatic.com/webp/gallery/3.webp" type="image/webp" class='thr'>
<source srcset="https://developers.google.com/web/fundamentals/design-and-ux/responsive/img/art-direction.png" type="image/png" class='two'>
<img src="https://images.pexels.com/photos/163016/crash-test-collision-60-km-h-distraction-163016.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" title="" class='one'>
</picture>
From the above example, and from editing it and playing with it by
Rearranging the <source> materials.
It can be easily found that:
The <source> elements are NOT hidden on the page,but do not contain the graphical content.
Regardless of the <source> used, the <img> element is always the element that contains the picture graphic (sometimes called an image (WTF?) ) .
The <picture> container object always exists but is a container such as <figure> in HTML5. It should not be given CSS styling intended for contents such as <img>.
Conclusion:
The code above (and its fiddles and edits) shows that all elements are present in the HTML, but the only one that is the image is the <img> element.
Therefore, you should not be applying any styling or CSS whatsoever to <source> elements and only container stylings should be applied to <picture> elements.
You Asked:
Do I need to repeat the class attribute for each source inside a picture element?
The Answer:
The answer is NO. You should style the <img> element ONLY.
Example:
<picture>
<source srcset="/images/example.webp" type="image/webp">
<source srcset="/images/example.png" type="image/png">
<img class="usp-pics pic1" src="/images/example.png" alt="something" title="">
</picture>
I am trying to center an image in a block using CSS and HTML. The code I am currently using works for both firefox and chrome but Microsoft Edge will not center. Chrome and firefox are both picking up the webp format of the image, while internet explorer is picking up the png.
I have tried using inline property instead of block for css. I have tried creating a function in CSS and applying that function to the HTML. I have tried setting an attribute name to the HTML box and editing the css to alter that box only. Virtually all of these things except for inline have worked on chrome and firefox. None work on edge.
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.png" type="image/png">
<img src="image.png" alt="circle of excellence" class="displayed" width="300" height="290">
</picture>
IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto }
I expected the image to be centered on all browsers. It was centered on all but Internet Explorer. I take this to mean there is something wrong with the way the png image is interacting with the code. Or my code is written in such a way as to exclude the png from centering.
Apparently the cash needed to reset in my microsoft edge. This code works perfectly. SMH
I just center the picture tag and it is working fine..
try this...
picture {
display: block;
text-align: center;
}
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.png" type="image/png">
<img src="image.png" alt="circle of excellence" class="displayed" width="300" height="290">
</picture>
Here's my code
<div class="table">
<div class="tr">
<div class="td">
<h1 class="logo-fill">
<a href="#" title="Logo">
<img alt="logo" src="./images/logo.png" />
</a>
</h1>
</div>
<div class="td">
<a href="#" title="AdSpace">
<img alt="adspace" src="./images/adspace.png" />
</a>
</div>
</div>
</div>
For some reason, the second image (adspace.png) is not displaying at all. If I remove the entire img tag and replace it with text, the text is displayed. Alternativly if I change the img tag to:
<iframe src="https://clients.ragezone.com/out.php/display/show_custom?id=48" scrolling="no" style="padding: 0px; overflow: hidden;" width="468px" height="60px" frameborder="no"></iframe>
Apparently that works as well. adspace.png is simply a 468px x 60px green box.
My money would be on the fact that you have an adblocker in your browser. Try changing class names and img name.
Adblocker plugins search for certain keywords in the code and block the page elements based on that.
In your image source path I saw one [dot] miss placed that may be a one problem.
This is your code
<img alt="adspace" src="./images/adspace.png" />
And try with this one
<img alt="adspace" src="../images/adspace.png" />
And other problem is your image name I also faced to this issue your image name is adspace.png and you added alt="adspace" and wrap it with link tag having the title with Adspace so the reason is some of plugins in your browser block all the images and divs starting with "ads / ad" this is called adblock plugins.
So you can easily change your img name and change everything starting with "ad" then you can find some useful fixing. Other way is you can remove the adblock plugins from your browser.
And please check your network too some networks admin can block ads too.