so iam trying to add a image i have saved on my project in image folder. But it dosent work
DirectCast(Customer.Items(0).FindControl("imageControl"), Image).ImageUrl = "~/images/IMG_1287.JPG"
DirectCast(Customer.Items(0).FindControl("imageControl"), Image).DataBind()
customer is the repeater html element the image element is in. I cant call the image element direct in the server code because the image element is inside a repeater element. So i have to use findcontrol method which works good. When i debugg the code i can se that it finds the right image element the problem is when i set the imageurl nothing seems to happen in the ui but i dont understand why can anybody help me please :)
<div>
<asp:Image ID="imageControl" Width="100%" Height="70%" runat="server"/>
</div>
To me it looks like you are not trying access controls within repeater in correct manner , it should be like :
If image is in header :
DirectCast(Customer.Controls[0].Controls[0].FindControl("imageControl"), Image).ImageUrl = "~/images/IMG_1287.JPG"
If image is in footer
DirectCast(Customer.Controls[Customer.Controls.Count - 1].Controls[0].FindControl("imageControl"), Image).ImageUrl = "~/images/IMG_1287.JPG"
Please have a look at this post for more details.
PS : Are you using vb ? cause i have used C# syntax, if yes change accordingly.
Related
I struggle with a problem associated with Angular 6 and displaying image encoded in base64 format. Any ideas why code shown below doesn't display image?
html:
<tr *ngFor="let row of this.UploaderService.tableImageRecognition.dataRows">
<img src="{{this.hello}}" />
ts:
this.hello = "data:image/png;base64, /9j/4AAQSkZJRgABAQAAA..."
While code shown below works properly and displays picture?
html:
<tr *ngFor="let row of this.UploaderService.tableImageRecognition.dataRows">
<!--<img src="data:image/png;base64, /9j/4AAQSkZJRgABAQAAA..."/>
this.hello is assigned in the constructor just for test purpose. I create it in this way this.hello = 'data:image/png;base64, ' + this.UploaderService.imageRecognitionRowsData[0].toString() My main goal is to display imageRecognitionRowsData in this loop <tr *ngFor="let row of this.UploaderService.tableImageRecognition.dataRows">. So for first iteration I would display image imageRecognitionRowsData[0] then during next iteration image imageRecognitionRowsData[1] etc. The length of this.UploaderService.tableImageRecognition.dataRows is always the same as this.UploaderService.imageRecognitionRowsData When I add <p>{{this.hello}}</p> I get the same string in html.
I have no idea what is wrong. I tried also with this.hello2 = this.sanitizer.bypassSecurityTrustResourceUrl(this.hello);, this.hello2 = this.sanitizer.bypassSecurityTrustUrl(this.hello);, <img [src]="this.hello" /> etc. but nothing works. Any ideas how to solve this?
You don't use "this" to refer the variables defined in the component "ts" file. Remove "this" may solve your problem.
Please Review this stackbliz Fiddle. Look inside the app component to see the implementation.
StackBlitz
This is what worked for me when working with base64 images.
HTML:
<img [src]="currVerifiedLoanOfficerPhoto">
Component:
this.currVerifiedLoanOfficerPhoto = 'data:image/jpg;base64,' + (this.sanitizer.bypassSecurityTrustResourceUrl(item) as any).changingThisBreaksApplicationSecurity;
You don't use this in html templates in Angular. All the variables/member methods are resolved on class by default. Access the variables directly as follows:
<img [src]="hello" />
I'm trying to concatenate Vue variable with image URL, but the browser didn't show the picture. Could anyone tell me what's the matter with my coding?
I have tried as follow.
The picture didn't show in the browser.
<img :src="'../assets/'+item.picture">
If I wrote as below, the picture is shown.
<img src="../assets/6cb38c91115bcdf0c824124e4b5ecb71.jpeg">
Thank you very much!
I'm trying the following:
<div id='divOwner' runat=server visible='<%# isAccountOwner(Me.UserId) %>'>
I would expect this to switch visible / invisible based on the value of isAccountOwner. This is not working as expected, and is always coming up visible. Can somebody enlighten me please?
Thanks
#in code nuggets (<% %>) is used with data bound controls like gridview, repeater control etc. For your div to work like this you need to call the DataBind method of this Div or one of its paremt control.
So, In page load include this line:-
divOwner.DataBind();
And make sure isAccountOwner returns a Boolean.
I have a simple image viewer webpage on gitpages but before I push the next group of images I want to condense all of my images into an array using angular.
The test I have made here uses only 4 photos that are in the same folder as every other file.(they are jpegs)
my js file is set up like this with a factory for the array and a controller.
angular.module('beamModule',[])
.factory('imageFactory', function(){
return {
getImages: function(){
return ['beam1.jpg','beam2.jpg','beam3.jpg','beam4.jpg'];
}
}
})
.controller('Photos', function(imageFactory){
this.images = imageFactory.getImages();
});
I don't think anything is wrong with this array but maybe I am overlooking something?
The HTML that I am using and the section that is giving me trouble when I check the developer tools is below.
<div class="imgcontainer" ng-controller="Photos as photosController">
<img ng-repeat="src in photosController.images"
ng-src="beamModule.js/{{images}}">
</div>
I am not sure if I am supposed to be using an ng-class attribute in the css or if there is something else that needs removed?
The developer tools are returning this value for each of the images (they are repeating just not showing)
<img ng-repeat="src in photosController.images" class="ng-scope">
Why is the ng-scope class being put in here and the ng-src is being removed?
EDIT FIXED
Ok to the person who answered so quickly and simply you are the real mvp here.
You said to change the ng-src="beamModule.js/{{images}}" to read {{src}} instead.
Once I tried this it still didnt work but then I checked the dev tools and noticed it was attempting to pull the files from the js file and not the actual file so I just changed it to this and now it works great! Thank you.
ng-src="{{src}}"
The ng-src attribute needed to point to the repeat instead of the js file.
ng-src="{{src}}"
I want dynamically add text-box in html page when user is press a button. and after that i want to get the respective field value or all field value.
I tried doing ng-repeat but it will not work. can anyone tell me how i will achieve this.
I would indeed use ng-repeat, and just push a new object onto the array. Maybe something like this?
<button ng-click="textFields.push("")">Add</button>
<textarea ng-repeat="val in textFields" ng-model="val"></textarea>
Well there are a few things you could try. One of them is loading a hidden div when clicked on the button. The hidden div contains the text box.
Like this :
$(document).ready(function(){
$("#hiddendiv").hide();
$("#button").click(function(){
$("#zmedia").show();
}};
And in your html form you just add a div that contains a textbox and the id of the dive should be "hiddendiv". The downside is that once the hidden div is loaded, it cant be removed. There are other scripts that are a lot more sophisticated, check these links out:
https://github.com/wam/jquery-addable
http://www.randomsnippets.com/2008/02/21/how-to-dynamically-add-form-elements-via-javascript/