Displaying an image in a div where the image is a filename - javascript

Please explain where i am going wrong
I am evaluating a xmlhttp.responceText
var list = eval ('('+xmlhttp.responseText+')');
The response from this contains JSON encoded data...
I can display the data by doing...
document.getElementById("list0.picture").innerHTML=list[0].picture;
<div id="list0.picture"></div>
The responce is a filename that changes when new data is sent..
i.e. picture001.jpg
How can i turn this filename into a visual image on screen instead of the file name
I have tried variations of below but i cant get it to work.. im sure it is simple but it has me stumped...
document.getElementById("list0.picture").innerHTML='<img src="/testsite/covers/('list[0].picture')" />';
my pictures are stored in /testsite/covers

You have missed + when performing string concatenation
document.getElementById("list0.picture").innerHTML=
'<img src="/testsite/covers/' + list[0].picture + '" />';
On side note, You don't need to use eval().

var someFileName = 'http://communio.stblogs.org/Donkey.jpg';
// create an element
var img = document.createElement('img');
// set its attributes
img.setAttribute('src', someFileName);
// attach the image to the DOM
document.body.appendChild(img);

document.getElementById("list0.picture").innerHTML='<img src="/testsite/covers/' + list[0].picture + '" />';

Related

How to embed medium post on website

so I am trying to embed the latest entrepreneur profiles from Medium#femalefounderssg into a site made on Wix, I tried to use the JSON and jQuery code here: https://codepen.io/jasonm4130/pen/vZYbQx
var tagIndex = item.description.indexOf('<img'); // Find where the img tag starts
var srcIndex = item.description.substring(tagIndex).indexOf('src=') + tagIndex; // Find where the src attribute starts
var srcStart = srcIndex + 5; // Find where the actual image URL starts; 5 for the length of 'src="'
var srcEnd = item.description.substring(srcStart).indexOf('"') + srcStart; // Find where the URL ends
var src = item.description.substring(srcStart, srcEnd); // Extract just the URL
output += '<div class="blog-element"><img class="img-responsive" src="' + src + '" width="360px" height="240px"></div></header>';
The issue I am facing is that since the code renders the first content that it sees, it always renders the logo (as in the image below), the entrepreneur profile photos that I want displayed with the posts are usually contained in the second
output of above code in my implementation
Could anyone please advise as to how the existing code can be modified or what other possible implementations are there? Thanks so much!

Scope image URL not updated & showing in view (AngularJS)

I'm new to AngularJS and I'm trying to retrieve an image link from Google Firebase that is put in a scope variable. This works when I perform the retrieval of the URL in an action using a different controller before this one loads it. However, when retrieving it in this controller, my div somehow doesn't want to display the image. I've checked with a simple ng-bind whether the scope variable is updated, and it is. However, the picture div in the view stays empty. Does anyone know how I can get my view to display the image?
Controller:
$scope.profilepicture = null;
var storageRef = firebase.storage().ref();
var path = "profilepictures/" + userFactory.getUser().uid + "/profilepicture";
var profilePicRef = storageRef.child(path);
profilePicRef.getDownloadURL().then(function(url) {
$scope.$apply(function(){
$scope.profilepicture = url;
});
}).catch(function(error) {
});
View:
<div ng-click="getImage()" ng-style="{'background-image' : 'url({{profilepicture}})'}" style="width:100px; etc...></div>
ng-style="{'background-image' : 'url(' + profilepicture + ')'}"
I've just found the issue. The ng-style url needed to be written like this: ' + value + '
Thanks for your help :)
Try like this by removing braces from there, but just make sure you are getting a right value of profilepicture.
<div ng-click="getImage()" ng-style="{'background-image' : 'url(profilepicture)'}" style="width:100px; etc...></div>

How to add an variable value in between the hyperlink in javascript

I am sending an email via javascript. In mail.parameter.text property I need to send the hyperlink. In the code below I am hardcoding the url whick looks very lengthy and also I need to add the /dashboard at the end of the url. Any idea on how to shorten the url?
var parent = space.getParent();
var siteGroup = "GROUP_EMAIL_CONTRIBUTORS";
var mail = actions.create("mail");
mail.parameters.to_many = siteGroup;
mail.parameters.subject="New Site Created in Community"
mail.parameters.text=" A new site called " + document.properties.name +"is created.Click http://pc1:8080/share/page/site/"+document.properties.name+"/dashboard"+" to join the site";
//execute action against a document
mail.execute(document);
Sorry if this is a basic question I dont know javascript. This is my entire script and I am not using any html tags in between.
You can change it to something like this, for example:
mail.parameters.text="Click <a href='http://pc1:8080/share/page/site/" + document.properties.name + "/dashboard'>here</a>";
Your link will appear as "here" and nevertheless lead to the URL you specified. Is that what you mean by "shorten the url"?
Please try now.
var url = "Click http://pc1:8080/share/page/site/" + document.properties.name + "/dashboard" + " to join the site";
ail.parameters.text = url;

Write Html Img id with javascript

I want to write
<img src="image/#######.jpg" id="#######" style="visibility: hidden;"/>
On my html page either from a file php or javascript json file.
The ####### could be any name that gets changed frequently.
There would be 100's of similar pages that's why I need to do it on the fly from an external file, instead of rewriting all those pages.
The id then gets accessed by javascript that matches it to a json file that uses it later in canvas.
Hope I haven't confused anyone.
You can do something similar to this
var newImage = #########;
var Ids = "####";
document.getElementById(Ids).src="../template/" + newImage + ".jpg";
Since you mentioned that there may be 100's, so you have to iterate the json and frame the code to act dynamically.
Hope you got an idea.
Update:
var idAndImageSrc = "#######";
document.getElementById("previousStaticImgId").setAttribute("id", idAndImageSrc)
.src="../template/" + idAndImageSrc + ".jpg";

Remove Image from its folder using javascript with Asp.Net

I am trying to delete an Image which are generated dynamically using javascript with Asp.Net and I am only able to delete it from the div container and from not is original path.
So how do I do that?
Here is my code:
$('#container').append("<div class='container a'><a href='#'><img src='uploads/" + document.getElementById("currentDirectory").value + "/" + file.name + "' width='64' height='64'/><span></span></a></div>");
$('.container a span').live('click', function (e) {
$(this).closest('div.container').fadeOut("normal", function () {
var ImagePath ="uploads/" + document.getElementById("currentDirectory").value + "/" + file.name + "";
var sPath = Server.MapPath(ImagePath) + dataName + fileName;
$(sPath).remove();
});
return false;
});
You won't be able to directly remove an image from the server using javascript alone. The only way you can achieve this is to call a server side method to do this for you.
In terms of .NET you can achieve this by writing a method on your server and exposing it as a web service. You can then call this method using jQuery's ajax functionality passing it the image name to remove. I would suggest restricting your web service to ajax POST requests and, as Richard pointed out in the comments, resticting what can and can't be deleted.

Categories

Resources