What the proper way to set src in img tag from js into asp.net? Because I try this way, it doesn't show up. The data from sql server and I'm using jquery and ajax to call the data. It's already show up in console but don't know why it be like that
In console
<img class="img-fluid px-3 px-sm-4 mt-3 mb-4" id="img" style="width: 25rem;" alt="learning" src="~/images/Capture205450514.PNG">
.js
let q = data[questionIndex];
if (q.img != null) {
$("#img").attr("src", q.img);
}
else {
img.style.display = "none";
}
.cshtml
<img class="img-fluid px-3 px-sm-4 mt-3 mb-4" id="img" style="width: 25rem;" >
Modify your src. You have not set it up correctly. If you are working with JavaScript, this is client-side and should be done this way.
<img class="img-fluid px-3 px-sm-4 mt-3 mb-4" id="img" style="width: 25rem;" alt="learning" src="images/download.jpg">
You did not mention what you are doing on localhost or not because you may need to
Absolute URL
All you have to do is to fix the Relative URL. Using ~ in URL doesn't make a valid URL.
If the images directory is at the root of your web application then use "/images/Capture205450514.PNG"
If the images directory is at the same level as of your HTML page then use "./images/Capture205450514.PNG" or simply "images/Capture205450514.PNG"
If the images directory is at one level higher than your HTML page then use "../images/Capture205450514.PNG"
Click here for reference
Related
I understand HTML/CSS pretty well, but not JavaScript. There is a script appending "=s1400" after image path. Why? Image will not load because of this. URL is https://zenith-express.com/airfreight.html (source files can be seen with Chrome DevTools).
Source HTML:
<img id="vbid-cfb2edc5-mm7avm4t" class="blocks-inner-pic preview-element magic-circle-holder load-high-res shrinkable-img" data-menu-name="HEADER_IMAGE" src="https://zenith-express.com/imgs/af_service_area.png" data-orig-width="688" data-orig-height="420" />
Displayed HTML:
<img id="vbid-cfb2edc5-mm7avm4t" class="blocks-inner-pic preview-element magic-circle-holder shrinkable-img" data-menu-name="HEADER_IMAGE" src="https://zenith-express.com/imgs/af_service_area.png=s1400" data-orig-width="688" data-orig-height="420" data-width-before-shrink="700" style="background-image: none;">
I found the answer.
I needed to add "data-width-before-shrink="700" to image tag like this:
<img id="vbid-cfb2edc5-mm7avm4t" class="blocks-inner-pic preview-element magic-circle-holder shrinkable-img" data-menu-name="HEADER_IMAGE" src="./imgs/af_service_area.png" data-orig-width="688" data-orig-height="420" data-width-before-shrink="700" style="background-image: none;">
I need to change the picture on the mouseover.
I have this code inside of odoo in products tab in the shop:
<span data-oe-model="product.template" data-oe-id="2" data-oe-field="image_1920" data-oe-type="image" data-oe-expression="product.image_1920" class="d-flex h-100 justify-content-center align-items-center"><img src="/web/image/product.template/2/image_256/A4Tech%20Bloody%20V8M?unique=0a360e4" class="img img-fluid" alt="A4Tech Bloody V8M"/></span>
And only thing that changes between the products is data-oe-id. Problem is that, only span tag, inside of which image is, has the some reasonable id. But image don't. So, I guess I can't use the getelementbyid.
Additional question - How I could extract the gif name from the database, if I am using odoo, and it is a new module. Also, if it is possible, how I could call the javascript function from odoo module.
https://jsfiddle.net/jy51ascu/
HTML(changed image only):
let image = document.querySelectorAll('span[data-oe-id="2"] img');
image[0].addEventListener("mouseover", function( event ) {
event.target.src = "https://via.placeholder.com/100x100?text=2";
}, false);
<span data-oe-model="product.template" data-oe-id="2" data-oe-field="image_1920" data-oe-type="image" data-oe-expression="product.image_1920" class="d-flex h-100 justify-content-center align-items-center"> <img src="https://via.placeholder.com/100x100?text=1" class="img img-fluid" alt="A4Tech Bloody V8M" /></span>
I'm trying to make this work with the following scenario:
My goal is to get the first image's src from the html structure bellow and then set its src value as the background-image: of another element which exists in the DOM.
The HTML output, dynamically loaded.
I've set up the Instafeed jQuery plugin in a way it outputs the following html structure: Images are dynamically loaded through Instagram API.
I want to grab the image src from the first image bellow...
<div id="instafeed">
<div class="col-xs-4">
<a href="#" target="_blank" class="thumbnail fa-eye fa">
<img class="dynamic-image" src="https://scontent.cdninstagram.com/hphotos-xpa1/t51.2885-15/e15/10375586_312675495555582_308260980_n.jpg">
</a>
</div>
<div class="col-xs-4">
<a href="#" target="_blank" class="thumbnail fa-eye fa">
<img class="dynamic-image" src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/e15/10454019_1429094704028916_1903084125_n.jpg">
</a>
</div>
<div class="col-xs-4">
<a href="#" target="_blank" class="thumbnail fa-eye fa">
<img class="dynamic-image" src="https://scontent.cdninstagram.com/hphotos-xpf1/t51.2885-15/e15/1530818_682625665122870_298851871_n.jpg">
</a>
</div>
</div>
...And place it as the url of the following target element .bgcover:
<div class="masthead bgcover" style="background-image: url('https://distilleryimage11-a.akamaihd.net/fdc05880f98511e2af2c22000a9e510c_7.jpg');"></div>
jQuery
The code bellow works, however, it gets the img src of one of the images in the html out and not the first one...
$( window ).load(function() {
// For each image with the class .dynamic-image on the page
$(".dynamic-image").each(function() {
// Grab the image
var image_source = $(this).attr('src');
// Set the background
$(".bgcover").css("background-image",'url('+image_source+')');
});
});
By reading the jQuery's :eq() Selector documentation, I'm now trying to learn how to use the selectors, but I'm pretty new to JS/jQuery, so I'd really appreciate any hints about making it work the right way.
The .each() function in jquery is like a loop. It will run loop through for every match. So, in your above code, ideally it is going to pick the last img tag and set its image as the background.
Instead if you used .first() function it would return the first element that it matches. This is the implementation that would work for you.
$(window).load(function () {
// For each image with the class .dynamic-image on the page
// Grab the image
var image_source = $(".dynamic-image").first().attr('src');
image_source = "url('" + image_source + "')";
// Set the background
$(".bgcover").css("background-image", image_source);
});
Hope this helps.
In my case i want to change the href image icons when the user comes to contact us page. But those images are loaded from header file and i want to change the image path when it comes to contact us page.
<div class="header_nav_buttons" style="width: 25%;">
<div id="first_img" style="float: left;margin-right: 3px;">
<a href="cth/support.php"><img src="cth/theme/boxxie/pix/tech_support.png"/><a>
</div>
<div id="second_img">
<a href="cth/contact.php">
<img id="contact_blue_icon" src="cth/theme/boxxie/pix/contact_us.png"/></a>
</div>
</div>
And i tried this Jquery codes.
$('#contact_blue_icon').each(function(){
//Change the src of each img
$(this).attr('src','cth/theme/boxxie/pix/blue_contact.png');
});
Any helps would be appreciated.
'contact_blue_icon' is an Id. It is an unique element
Try with full image path
$('#contact_blue_icon').attr('src','http://image_path');
Since id is unique, you need to use class instead for your images:
<img class="contact_blue_icon" src="cth/theme/boxxie/pix/contact_us.png"/></a>
So you need class="contact_blue_icon" not id="contact_blue_icon"
Is there a function to replace one image with another
Example
I want to replace the external image in the output
<img src="http://pierre.chachatelier.fr/programmation/images/mozodojo-original-image.jpg" alt="" class="thumbnail ">
with a internal image
<img src="http://www.alforat.org/attachments/4309d1250860423-12image-insolite02.jpg" alt="" class="thumbnail ">
What you want to use is Javascript, not PHP.
Php is server-side language, while Javascript is client-side.
To make your life with Javascript easier, You should use jQuery, try setting an id for your img and then :
$("#my_image").attr("src","http://www.alforat.org/attachments/4309d1250860423-12image-insolite02.jpg");
About how to handle that, where to put it and how to write Javascript, try Here