I have an Ionic Angular app and I'm trying to update img src dynamically.
let element = <HTMLImageElement>document.getElementById(`myImage${index}`);
console.log(this.articleCards[index].images[this.articleImageIndex])
element.src = this.articleCards[index].images[this.articleImageIndex];
HTML
<img #tinderCardImage
id="myImage{{index}}"
[src]="article.images[0]"
[alt]="article.name" >
I can see in "Network" debugger that the new image src is downloaded, but impossible to update/refresh the image displayed...In "Element" debugger I get the initial image.
Moreover, I have a second component where everything works perfectly....
So, If someone has an idea please
You can set the src dynamically on html itself
[src]="articleCards[index].images[articleImageIndex]"
Related
In sample projects loading image is shown when a process or event is on going. How to configure loading image for a button click or page loading can anyone give a example.
This code will update src attribute of the img DOM element and force browser to (re)load image:
// onClick event of some button/widget
app.currentPage.descendants.ImageWidget.url = 'http://cats.com/myCat.jpg';
I have the following scenario.
User is trying to update the profile image , I am using uploadify plugin to upload image to server , and in callback I am setting
<img src="" runat="server" class="user-image" id="uploadedImage" />
SRC attribute to the uploaded path. This part is working good , then when user clicks on Save button , i need somehow to get new picture path and save it to database.
user.ImageUrl = this.uploadedImage.Attributes["src"];
doen't brings a new picture path , and returns a previous path.
Can someone help pls ?
If you want to accomplish this you may use using hidden field, among other ways.
Please refer to: http://www.codeproject.com/Articles/603102/Persist-JavaScript-changes-on-postback,http://forums.asp.net/t/1428896.aspx/1,http://forums.asp.net/t/1285473.aspx.
I'm having a problem enabling multimedia components i.e. image components to be edited through Tridion UI. When I use a General Content Component that has an image field it works fine without any issues as I get the JSON objects below:
<!-- Start Component Presentation: { 'ComponentID' : 'tcm:15-5444', 'ComponentModified' : '2012-12-27T12:07:29', 'ComponentTemplateID' : 'tcm:15-5364-32', 'ComponentTemplateModified' : '2012-12-27T11:30:49' } -->
<div><!-- Start Component Field: {'XPath' : 'tcm:Content/custom:Content/custom:image[1]'} --><img src="/Preview/_images/15-5366Hero%20Banner.jpg" alt="Banner SE"></div>
However When using an Image Schema Component directly with a Component Template the following tags are output:
<!-- Start Component Presentation: { 'ComponentID' : 'tcm:15-5366', 'ComponentModified' : '2012-12-18T13:21:46', 'ComponentTemplateID' : 'tcm:15-5364-32', 'ComponentTemplateModified' : '2012-12-27T11:30:49' } -->
<div><!-- Start Component Field: {'XPath' : 'tcm:Content/custom:Content/custom:Component.ID[1]'} --><img src="/_images/15-5366Hero%20Banner.jpg" alt="Banner SE"></div>
I know that I may not need to use "custom:Component" as this doesn't exist in the XML but can you see what I am doing wrong? Has anybody had any experience using a Multimedia Component directly on a page and been able to have the left hand image selection sidebar display?
Regards,
Billy
The markup you pasted is about inline editing of Component fields.
You can't use it for anything else.
You can inline edit the Metadata fields of an image Component in the Tridion UI, but you cannot upload a new version of the image. For that you will need use Open in Form View.
To get the Library Panel in Experience Manager (XPM), from the Home tab select Insert Content > Insert Content to get access to the left-hand images.
Your images' multimedia schema needs to have an associated Component Template (this is set in the Component Template's Linked Schema). Though you seem okay since you have the image as a Component Presentation already.
At least on my VM, the thumbnails appear automatically.
Is it possible to pass the url attribute a dynamical query string? E.g url( ./SOME_IMAGE_GENERATOR?image=1 ); where image varies?
I need this attribute to be set via JS:
$( "#elem" )[ 0 ].style.background = "url( ./renders/circuit.php?circuit=" + dirY + dirX + "&dims=1|1 )";
The link in the url points to a file, that generates and returns an image.
The image is generated correctly, but not applied as backround.
Clarification
The image I want to put inside does not exist yet. It is generated and returned by the page circuits.php and depends on the arguments.
The background is well changed, if the image exists. I have noticed that unlike changin the src attribute of the img tag, while the argument creates a request by the browser, sends and recieves headers and info, the background does not.
I'd thought about sending a request to the circuit.php generator, make him save the image on the server and then, with setTimeout, change the background, but I cannot rely on a certain time for the generation.
That is the problem. Now, do you guys have any ideas how to overtake this?
Working Example
I've replicated your scenario with a Jsfiddle and a image generating script held on my own website.
As you can see it is indeed possible to change the background dynamically with a generated image:
http://jsfiddle.net/DigitalBiscuits/Eh8yY/6/
Debugging your code
So....what's wrong with yours?
Well firstly if you're using Firefox or Chrome, use the developer tools to check what's going on. Make sure no Javascript errors are showing up in the console.
Then I would suggest you check that your javascript is actually selecting the element, and that it is able to change the background (lets say to a static image). Isolate the code you that's giving you problems and test it out in a new empty page, kinda like the JSfiddle I've linked you to above.
On a side note, your javascript code looks a bit foreign to me.
Instead of:
$( "#elem" )[ 0 ].style.background = ...
try using:
document.getElementById('myImg').style.background = ...
Lastly, ensure that you're setting the correct headers in your php script that generates the images, and that no output is happening before the headers are set.
Are you using jQuery?
This should be very easy to do.
Store the generated image url in a variable, and then use jQuery to change the CSS background image value, like so:
var imageUrl = "./renders/circuit.php?circuit=" + dirY + dirX + "&dims=1|1";
$('#myDiv').css('background-image', 'url(' + imageUrl + ')');
Here's a a jsfiddle demonstrating the concept. Click the div to see the background-image dynamically changed via JS.
http://jsfiddle.net/DigitalBiscuits/F3PUy/2/
Yes its possible to set on-the-fly images as background images, using CSS.
This is no different to how you can use on-the-fly images for img elements.
I have a website on GoDaddy. All permissions are set correctly and the image DOES exist. However when the page loads the image for the item selected does not show. Here is my code
imagepath = "~/spaimages/" + currentSpaModel.Name.ToString() + ".png";
if (File.Exists(Server.MapPath(imagepath)))
{ this.spaimage.ImageUrl = Server.MapPath(imagepath); }
spaimage is an ASP control and thr URL that the image is set to is D:\hosting\xxxxxxx\calspas\spaimages\modelname.png
What am I doing wrong.
The file path D:\hosting\xxxxxxx\calspas\spaimages\modelname.png is the folder where the image resides on the web server. You are sending this as the <img> tag's src attribute, which tells the browser, "Go get the image at D:\hosting\xxxxxxx\calspas\spaimages\modelname.png." The browser cannot go off to the D drive of the web server, so it looks on its own D drive for that folder and image.
What you mean to do is to have the <img> tag's src attribute be a path to a folder on the website. You're just about there - just drop the Server.MapPath part when assigning the image path to the ImageUrl property. That is, instead of:
this.spaimage.ImageUrl = Server.MapPath(imagepath);
Do:
this.spaimage.ImageUrl = imagepath;
See if that works.
Thanks
Often, if an image "does not show" (I assume a red-x-equivalent is being displayed to show "broken image"), I right-click the broken image, copy the URL and open the URL in a separate browser window.
This way, when the image is being generated by some script, I see any error text that the script might have shown. If not, the real image would be displayed.
In addition, add an else block to the
if (File.Exists(Server.MapPath(imagepath)))
like
else
{
Response.Write(string.Format(
"File does not exist at '{0}'.",
Server.MapPath(imagepath)));
}
For debugging purposes.