Simulate Save Image As [duplicate] - javascript

This question already has answers here:
How to save a base64 image to user's disk using JavaScript?
(4 answers)
How to save an image via JavaScript
(3 answers)
Closed 9 years ago.
How can I trigger a "Save Image As" action when an image is clicked?


You can do it using HTML5's download attribute and no jQuery with:
<a href="http://farm3.staticflickr.com/2881/10000610654_fdf29eb02f_q.jpg" download>
<img src="http://farm3.staticflickr.com/2881/10000610654_fdf29eb02f_q.jpg" alt="Smiley face">
</a>
You can also declare the filename if you would like it to take a name other than default:
<a href="http://farm3.staticflickr.com/2881/10000610654_fdf29eb02f_q.jpg" download="fileName.jpg">
<img src="http://farm3.staticflickr.com/2881/10000610654_fdf29eb02f_q.jpg" alt="Smiley face">
</a>

Related

How to get images over img referrer policy? [duplicate]

This question already has answers here:
How to use querySelectorAll only for elements that have a specific attribute set?
(3 answers)
Closed last month.
is there any way to hide all images, that use referrerpolicy="unsafe-url"?
I know how to get images by class or id. But I didnt find referrerpolicy.
I would like to add a class to all images on a page having referrerpolicy="unsafe-url" in it.
<img referrerpolicy="unsafe-url" src='...'>
And after:
<img referrerpolicy="unsafe-url" class='hidden' src='...'>
Thanks for any hint.

try that but in your browser, I tested it in chrome, firefox, it's ok. Here in snippet not.
Array.from(document.querySelectorAll('img')).forEach(el=> {
if (el.referrerPolicy==='unsafe-url') {
el.style.display='none';
}
}
)
<img referrerpolicy="unsafe-url" src='https://picsum.photos/id/20/800/600'>
<img referrerpolicy="unsafe-url" src='https://picsum.photos/id/20/800/600'>
<img referrerpolicy="unsafe-url" src='https://picsum.photos/id/20/800/600'>
<img referrerpolicy="no-referrer" src='https://picsum.photos/id/20/800/600'>

How can I disable links inside a certain class using JS? [duplicate]

This question already has answers here:
How do I disable a href link in JavaScript?
(20 answers)
Closed 5 months ago.
I need a script that will disable all links inside the "parent" .my-class using Vanilla JS (without jQuery):
<div class="my-class">
<div class="class-1">
<div class="class-2">
<div class="class-3">
<a href="#">
<div class="class-4"></div>
</a>
<a href="#">
<div class="class-4"></div>
</a>
<a href="#">
<div class="class-4"></div>
</a>
</div>
</div>
</div>
</div>
UPD: I need links that can't be clicked on. It doesn't matter if the "href" entry remains or not.

You can check the answers on this entry, I think they will help: How do I disable a href link in JavaScript?
But, basically, you have two options:
Avoid the "href" attribute from having a value
1.1. Remove the attribute alltogether:
parentElement.querySelectorAll('a').forEach(link => link.removeAttribute("href"));
1.2. Set the value to "javascript:void(0)":
parentElement.querySelectorAll('a').forEach(link => link.setAttribute("href", "javascript:void(0)"));
Prevent click events from being fired:
parentElement.querySelectorAll('a').forEach(link => link.style.pointerEvents = "none")

you can remove the href attribute or its value
links = document.querySelectorAll('.my-class a');
Array.from(links).forEach(element => {
element.setAttribute('href', '#');
});

Show placeholder if image not found [duplicate]

This question already has answers here:
Angular2: Show placeholder image if img src is not valid
(9 answers)
Closed 2 years ago.
I was trying to use onerror. Whenever image is not found in the folder it displays a placeholder. My image path is dynamic and comes from backend. Below is how I used it.
<img class="" src="{{imagePath}}my_image.jpg" onerror="this.src='{{imagePath}}placeholder.jpg';" alt="Image not found">
But this is not working and giving error.

For this I used to use picture tag, browsers will try first source, then second, if browser don't have picture interpreter will use img tag.
Like this:
<picture>
<source alt="Special Days" srcset="[First Image route].jpg" type="image/jpeg">
<source alt="Special Days" srcset="[Second Image route].jpg" type="image/jpeg">
<img alt="Imagen" src="[First Image route].jpg">
</picture>

Javastript syntax in quotes [duplicate]

This question already has answers here:
Template literals like 'some ${string}' or "some ${string}" are not working
(7 answers)
Closed 2 years ago.
I want to use js syntax to have diffrent URL for each image. Robohash website give us random robot image if we use diffrent URL ending, in that way i want to do below, but looks like ${props.id} is not treated as syntax but just as a part of URL, so im gets the same image for all.
<img alt='robots' src={"https://robohash.org/${props.id}"} />

<img alt='robots' src={`https://robohash.org/${props.id}`} />

You should use template string using backticks:
<img alt='robots' src={`https://robohash.org/${props.id}`} />

How taking the value of a href attr in a div [duplicate]

This question already has answers here:
jQuery: How to get the value of an html attribute?
(6 answers)
Closed 8 years ago.
I have a link, how can i get the value of the alt attr in my href ? (1)
<div class="user_line">
<img class="delete_user" src="images/close_button_mini.gif">
<a class="chat_user" alt="1|Test" href="#">Test</a>
</div>
// With $this
$('.delete_user').live('click',function(){
}
Thanks

you can take the alt like this
var alt=$('.chat_user').attr('alt');

Categories

Resources