Is there any way how to replace the path location using span or etc. that comes from the Jquery, or is there any shorcut in Django?, Currently as you can see I'm trying to override the path that comes from my jquery src="/media/<span id=image></span>". Is there any other way to pass the path image that comes from jquery into the img src?. It would be great if anybody could figure out where I am doing something wrong. thank you so much in advance
Jquery
$(document).on('click', 'a[data-role=show_scanned]', function(){
let csrf = $('input[name=csrfmiddlewaretoken]').val();
var path = $(this).attr('id'); #Image path example: image.jpg
var assign = $("#image").html(path);
$("#scanned_show").modal('show');
});
html retrieve
<img class="card-img img-fluid mb-1" src="/media/<span id=image></span>" alt="Card image cap" style="width: 900px;height: 600px;">
The line below can get the text of a span
$("#image").text()
You can then assign this to the src attribute of the img tag:
$("#imageDisplay").attr("src", $("#image").text() );
Demo:
// Add click event
$("#load").click(function() {
// Add text from span to src attribute of img
$("#imageDisplay").attr("src", $("#image").text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id=image>https://via.placeholder.com/150</span>
<button id="load">Load Image</button>
<img id="imageDisplay">
Related
I'm doing an HTML assignment for a class at university and I was stuck on a problem asking me to create a button with the label “Change color!”. When the button is pressed, a script will execute causing the “green_parakeet.jpg” image to be replaced with “blue_parakeet.jpg”.
When I emailed the professor, she said for me to add onclick="statement" property, e.g. you can call a function here as shown in the example from the LX12 document <button onclick="f(x);">. Then you can write a script language to set up the function in a way that img tag should change src property value to a new one.
Here's my HTML code so far
<img src = "green_parakeet.jpg">
<button> Change Color! </button>
I can't figure out what to do next.
I have created this code according to this.
<script>
function change() {
document.getElementById("image").src = 'blue_parakeet.jpg';
}
</script>
<img id="image" src = "green_parakeet.jpg">
<button onclick="change()"> Change Color! </button>
edit: The code below will remove the onclick.
<script>
function change() {
document.getElementById("image").src = 'blue_parakeet.jpg';
document.getElementById('button').removeAttribute("onclick");
}
</script>
<img id="image" src="green_parakeet.jpg">
<button id="button" onclick="change()"> Change Color! </button>
I'm working on a project where there are tiles of different pictures and I want to pass the value to another page when an image is clicked on. Since <img> doesn't have a value attribute, I tried to wrap an <a> tag around the image as follows, although it does the job, the format of the image is messed up. Is there a better way to do this that doesn't mess with the format of the image? Thank you for your help.
<a href="results.inc.php?value=gpu" onclick="post">
<img src="https://via.placeholder.com/200.jpg" alt="" class="cardImg">
</a>
Based on your comment, the most "harmless" way to do it would be JavaScript, adding a custom attribute to the image for the value you want it to pass in the onClick method.
document.addEventListener("DOMContentLoaded", function() {
var allCards = document.querySelectorAll(".cardImg");
for(i = 0; i < allCards.length; i++) {
var value = allCards[i].getAttribute("data-card-value");
allCards[i].addEventListener("click", function() {
document.location.href = "results.inc.php?value=" + value;
});
}
});
.cardImg {
cursor:pointer;
}
<img src="https://via.placeholder.com/200.jpg" data-card-value="gpu" alt="" class="cardImg">
how to set default img when there is no no image load
<img src="imggirl.jpg">
If you just want to display alternative text then you can do something like this.
<img src="imggirl.jpg" alt="girl image">
If you want to replace the image with default image then you can do something like this.
function imageExists(image_url){
var http = new XMLHttpRequest();
http.open('HEAD', image_url, false);
http.send();
return http.status != 404;
}
const imageElement = document.getElementById('image');
if (imageExists('https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png')) {
imageElement.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png';
}
<img src="https://www.talkwalker.com/images/2020/blog-headers/image-analysis.png" id="image">
You can Try like this
<img src="imggirl.jpg" alt="girl_image" title="Image">
You can use "alt" attribute which is short for alternative text to state an alternate text for the Image
ex:
While I wasn't that concerned about it in the beginning, I noticed that my page size is about 9 MB (+/- 200 images). I want to somehow decrease this by only loading the image when the user hovers over the specific <a>, so that only that image is loaded (which should decrease the page size drastically).
The code below is what I'm using right now
<style>
div.img {
display: none;
position: absolute;
}
a:hover + div.img {
display: block;
}
</style>
<div>
Some Name
<div class="img">
<img src="http://sub.domain.com/somename.jpg" alt="Some Name" style="some styles">
</div>
</div>
I think it's possible with jQuery, but I don't know where to start.
Thanks in advance.
Well if you have around 200 images in your directory, when a client requests the webpage it is going to have to download the images to have them ready if you are using a single page layout. I would look into lazy loading just as Adam stated. If you can also I would suggest to try to compress the photos if you can to lower the file size if possible. Good luck!
I fixed my problem by adapting an existing pen-code to adjust my needs (using jQuery). It now works again in IE/Firefox
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function($) {
$('.trigger').mouseover(function() {
// find our span
var elem = $(this).siblings('span');
// get our img url
var src = elem.attr('data-original');
// change span to img using the value from data-original
elem.replaceWith('<img src="' + src + '" style="display:block;position:absolute;"/>');
});
$('.trigger').mouseout(function() {
// find our span
var elem = $(this).siblings('img');
// get our img url
var src = elem.attr('src');
// change span to img using the value from data-original
elem.replaceWith('<span data-original="'+src+'"></span>');
});
});
</script>
Hover over me to fetch an image
<span data-original="https://lorempixel.com/g/150/200/"></span>
you can put the image with no src attribute and put the specific src in the href of div or the image!
then use jquery to get the href of a or data-src of image and then give it to the image the code will be something like this:
<a class="image" href="the-src-of-the-image">
<img src="(leave this blank)">
</a>
and this is the jquery
jQuery(document).ready(function($){
$('.image').on('hover',function(){
var img_src = $(this).attr('href');
$(this).children('img').attr('src',img_src);
});
});
I want to add a DOM dynamic ID into an image url. The current img src url has values, but I want to insert values through variables DOM objects.
Movie.Imdb is a variable that I want the img src to dynamically render.
<div id=imdb style="visibility: hidden;">{{movie.id}}</div>
<div src="http://img.omdbapi.com/?i=tt3896198&h=600" ></div>
I want the image src url to be rendered as:
http://img.omdbapi.com/?i=+"imdb"+&h=600
So that it can be dynamic.
Try to use of append() and attr() jQuery
Stack Snippet
var imageUrl = $("#imageUrl").attr("src");
$(".wrapper").append("<img src=" + imageUrl + ">")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div id="imageUrl" src="http://img.omdbapi.com/?i=tt3896198&h=600&apikey=6c3a2d45"></div>
</div>
<div src="http://img.omdbapi.com/?i="+movie.id+"&h=600" ></div>
This should work.