I have an image in an html template that I want to change, but I am not able to do it. How to use a different image in this code. Here is the code
<div class="rimage" style="padding-top:72.97297297297297%;"><img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
class="rimage__img rimage__img--fade-in lazyload"
data-master="https://cdn.shopify.com/s/files/1/0026/2910/7764/files/02_411c8729-8b45-405b-8807-5323f22695cb_{width}x.progressive.png.jpg?v=1552393705"
data-aspect-ratio="1.3703703703703705"
data-srcset="https://cdn.shopify.com/s/files/1/0026/2910/7764/files/02_411c8729-8b45-405b-8807-5323f22695cb_900x.progressive.png.jpg?v=1552393705 1x, https://cdn.shopify.com/s/files/1/0026/2910/7764/files/02_411c8729-8b45-405b-8807-5323f22695cb_900x#2x.progressive.png.jpg?v=1552393705 2x"
data-scale-perspective="1.1"
alt="">
Related
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>
Next.js has an Image component that lazy loads images and also provides a srcset for a given image.
However, sometimes we want to deliver different images for different devices (art redirection).
Mozilla says we should use <picture> element for this purpose, providing different images for different media queries.
I can't find an article (even in next.js official docs) to tell us how can we do that using <Image> component.
Is it possible? How can I use next.js <Image> component and HTML <picture> element together?
I have searched for hundreds of websites, this is the only solution I found which workable on Next.js ( with tailwindcss ).
import Image from 'next/image'
<div>
<div className="md:hidden">
<Image src="Banner-767x500.webp" height={500} width={767} />
</div>
<div className="hidden md:inline-flex lg:hidden">
<Image src="Banner-1023x500.webp" height={500} width={1023} />
</div>
<div className="hidden lg:inline-flex xl:hidden">
<Image src="Banner-1400x500.webp" height={500} width={1400} />
</div>
<div className="hidden xl:inline-flex">
<Image height={500} width={2000} src="Banner-2000x500.webp" />
</div>
</div>
The new version of Next Image component removes a lot of the extraneous HTML and styles and allows full flexibility of the img tag. With that new improvement in the component we can use the picture tag and the image component as normal.
Plus, Web.dev explains the way the picture element works really well: https://web.dev/learn/design/picture-element/
In the same way that srcset builds upon the src attribute, the picture element builds upon the img element. The picture element wraps around an img element.
If there is no img element nested inside the picture element, the picture element won't work.
Like the srcset attribute, the picture element will update the value of the src attribute in that img element. The difference is that where the srcset attribute gives suggestions to the browser, the picture element gives commands. This gives you control.
So, understanding that the picture element is just a wrapper of the img element which the browser still requires, and using the new version of next/image (Nextjs v. 13), you can write it as:
import Image from "next/image";
<picture>
<source srcset=".." media="..."/>
<Image src="..." height="..." width="..." alt="..." />
</picture>
A better approach is to use vanilla HTML as the following example, tested in Next.js 13.
Pros:
Full control of what you're showing and when.
Cons:
Manual optimization of assets.
<picture>
<source srcSet="/portrait/my-dog.webp" media="(orientation: portrait)" />
<img src="/my-dog.webp" alt="A beautiful labrador" loading="lazy" />
</picture>
I'm trying to update my company's website to be more ADA friendly by ensuring all images have alt-text assigned. However, when I add alt text on the Wordpress CMS, I'm not able to view it in the HTML.
Please see attached screenshots for reference.
I would greatly appreciate any help that any one can give me on where to look on the server and what to add to ensure that my alt-text will be displayed.
This is the code snippet for the icon I reference in the screenshot:
<img data-src="https://applecareurgentcare.com/wp-content/uploads/2020/04/apple-care-laptop.png" class=" lazyloaded" src="https://applecareurgentcare.com/wp-content/uploads/2020/04/apple-care-laptop.png">
Screen shot of alt text added in wordpress media library
Well there are two ways of doing this, when you have the attachment ID. I am going to answer with the best and recommended way.
Use the function wp_get_attachment_image from WordPress core.
You can use it in this way.
echo wp_get_attachment_image( 49, 'thumbnail' );
Where 49 is the id of the image and and thumbnail is the size.
Output:
<img width="150"
height="150"
src="http://checkout.io/wp-content/uploads/2021/06/profile-150x150.jpg"
class="attachment-thumbnail size-thumbnail"
alt="Test Alt Text"
loading="lazy"
srcset="http://checkout.io/wp-content/uploads/2021/06/profile-150x150.jpg 150w, http://checkout.io/wp-content/uploads/2021/06/profile-300x300.jpg 300w, http://checkout.io/wp-content/uploads/2021/06/profile-60x60.jpg 60w, http://checkout.io/wp-content/uploads/2021/06/profile-110x110.jpg 110w, http://checkout.io/wp-content/uploads/2021/06/profile-100x100.jpg 100w, http://checkout.io/wp-content/uploads/2021/06/profile.jpg 538w"
sizes="(max-width: 150px) 100vw, 150px">
Benefits of it.
You get your alt text for your attachment.
You get loading="lazy" which is a recent update in WordPress.
You get srcset.
As this is a WordPress core function you will be automatically be compatible with all the image feature updates that comes, be it a SEO or a performance update.
I have a HTML5-NetBeans-project (NetBeans IDE 8.2). During drag-and-dropping image files from the project tree to html-document in editor, I get the code like this one:
<img src="photos/window.jpg" alt=""/>
that is, the image parameters width and height are "not picked up".
Is it possible, drag-and-drop image file to html-editor so that to get code like this?
<img src="photos/window.jpg" alt="" width="375" height="500">
<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