I have the following code:
app.component.html:
<button (click)="updateImage('image1.png')"></button>
<img src="{{selectedImage}}" alt="" />
app.component.ts:
selectedImage;
updateImage(image) {
this.selectedImage = image;
}
My question is...If image url has been passed, why isn't the image src updating?
use [src] instead of src
<img [src]="selectedImage" alt="" />
Also, ensure that your pathing is correct. The code looks good, but the app may not find your image. There would be an error 404 in your browser console if that were the case.
Try placing the image in your assets folder and linking it with updateImage('/assets/image1.png')
Related
Is there a way to use jQuery to change a part of an image's source URL?
I'm working on a page that has a number of image elements that are all programmatically generated (but I'm not able to access the source code that generates them). And they all share the same class.
Let's say I have the following HTML:
<img src="https://cdn.example.com/pictures/01.jpg" class="photo">
<img src="https://cdn.example.com/pictures/02.jpg" class="photo">
<img src="https://cdn.example.com/pictures/03.jpg" class="photo">
<img src="https://cdn.example.com/pictures/04.jpg" class="photo">
Simple enough. But now, what if I want to point them all to a different directory? Like: /images/
So far, I've tried a few things, including this bit of jQuery, but nothing's done the trick so far:
$("img.photo").attr("src").replace("pictures","images");
That feels like it should do it because it's targeting images with that class -> then the "src" attribute -> and telling it to replace "pictures" with "images."
But I'm extremely new to using jQuery, so I'd appreciate some help.
What am I missing here? Any advice?
UPDATE: Huge thanks to those who provided answers and explanations — I really appreciate you helping a beginner!
In your code you simply change the returned string from
$("img.photo").attr("src") without doing anything with it afterwards. This will not change the attribute in your <img> elements.
This should do the job:
$("img.photo").each(function(){this.src=this.src.replace("pictures","images")})
Here I go through all the matched elements and assign the changed src string back to each element's srcattribute.
$("img.photo").each(function(){this.src=this.src.replace("pictures","images")});
// list the changed src values in the console:
console.log($("img.photo").map((i,img)=>img.src).get())
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://cdn.example.com/pictures/01.jpg" class="photo">
<img src="https://cdn.example.com/pictures/02.jpg" class="photo">
<img src="https://cdn.example.com/pictures/03.jpg" class="photo">
<img src="https://cdn.example.com/pictures/04.jpg" class="photo">
Your code snippet won't work, because that's grabbing the src attribute of the first image, and changing it, but never setting the result as the new src on the <img> elements.
Try this
$("img.photo").each((index, img) => {
img.src = img.src.replace("pictures","images");
});
I'm trying add images in "for" loop
<div id="p_0" style="text-align:right">
<picture style="text-align:right;visibility:visible">
<img src="~/lib/images/Wisielec1.png" alt="Wisielec" style="width:100px;margin-left:inherit">
</picture>
</div>
#for(int i = 1; i < 6; i++)
{
<div id="p_#i" style="text-align:right">
<picture style="text-align:right;visibility:visible">
<img id="pi_#i" src="" alt="Wisielec" style="width:100px;margin-left:inherit">
</picture>
</div>
}
so in JavaScript I have
var images = ['Wisielec1.png', 'Wisielec2.png', 'Wisielec3.png', 'Wisielec4.png', 'Wisielec5.png', 'Wisielec6.png' ];
document.getElementById("pi_" + j).src = "~/lib/images/"+ images[j];
But when I'm loading page there is no images in folder /lib/images visible in Developer tools.
Do I have to attach this folder somewhere so that the pictures are uploaded to the server?
I can see pictures only when I enter the path of a specific picture in html code. In console I have error :
Yes, I'm getting error "Wisielec2.png:1 GET https://localhost:44320/Home/~/lib/images/Wisielec2.png 404
This looks wrong:
"~/lib/images/"
Why are you using a ~ at the start of the path? Notice what it does to the URL:
https://localhost:44320/Home/~/lib/images/Wisielec2.png
This has nothing to do with the code you're writing, you're simply using an incorrect URL. If /Home is in the root of your website then just use that:
"/Home/lib/images/"
Or perhaps use a relative path based on where you're calling it from:
"../lib/images/"
Basically you need to determine what the actual correct URL is for your images and use that.
Api: http://api.openweathermap.org/data/2.5/weather?q=Canberra,Australia&appid=8d2de98e089f1c28e1a22fc19a24ef04&units=metric
Image Source I want to load:
http://openweathermap.org/img/wn/10d#2x.png
Code used:
<img
src={
'http://openweathermap.org/img/wn/' +
{this.state.weatherdata.weather[0].icon} +
'#2x.png'
}
></img>
Did you try the following?
console.log('http://openweathermap.org/img/wn/'+{this.state.weatherdata.weather[0].icon}+'#2x.png'})
Try to console it since I dont know the details of this I cant help you, there should be a problem with your string
Sorry to sound naive since I'm a beginner. I have been trying to load an image on my website with the image hosted somewhere else online and having a url "http://www.vapor-rage.com/wp-content/uploads/2014/05/sample.jpg"
I have an image tag defined as below
<img id="image" src="" alt="" />
Moreover my javascript function executes the following on a button click
document.getElementById("image").src="http://www.vapor-rage.com/wp-content/uploads/2014/05/sample.jpg";
The URL seems to work fine, but the image doesn't show up onclick.
Am I making any mistake?
Thanks for any suggestion :)
I could see that you are using " inside here, may be the HTML would also have " so that, it might not work. You can use the following code:
<a href="#"
onclick='document.getElementById("image").src="http://www.vapor-rage.com/wp-content/uploads/2014/05/sample.jpg"; return false'>Change</a>
I created a Jsfiddle, and it seems to work fine.
https://jsfiddle.net/ltlombardi/jvts4m3y/
var coco = function(){
document.getElementById("image").src="http://www.vapor-rage.com/wp-content/uploads/2016/02/Vapor-Rage-Small-Logo-new.png";
};
<img id="image" src="" alt="" />
Click here
hey so i'm trying to use onerror with img tag which will check if website is up or not. According to my research i have done onerror can be used to get status for website. So what i'm trying to accomplish is if website has an 404 it will return an image which red color however if website is up and running then it will show an green image. So i was able to come up with a code that does the trick but issue is i want to combine the code so it will only show one image at a time except two below is sample of my code any help will be apprecaited.
<img src="badlink" onerror="this.onerror=null;this.src='https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Red.svg/120px-Red.svg.png'" />
<img src="https://www.google.com" onerror="this.onerror=null;this.src='http://greensportsalliance.org/images/darkGreenSquare.gif'" />
<img src="badlink" onerror="onerror=null;this.src='https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Red.svg/120px-Red.svg.png'" />
<img src="https://www.google.com" onerror="onerror=null;this.src='http://greensportsalliance.org/images/darkGreenSquare.gif'" />