How to get image path from JSON file? [closed] - javascript

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 years ago.
Improve this question
I am just trying to display an image from a JSON file:
[
{
"Images" : "images/examples.jpg"
}
]
But JSON does not accept the path as a path but as a string. Is there any way to display the image?

I'm not sure how you are processing the JSON but the path of the image is all you need. You would simply then use that path to show the image.
In the example below I used javascript to parse the image path and inject it into the image source.
The key here is you need to somehow get the path of the image into the img tag.
<img src="{{json.Images}}">
var json = '{"Images" : "https://res.cloudinary.com/demo/image/upload/sample.jpg"}';
var jsonObject = JSON.parse(json);
document.getElementById("someImage").src = jsonObject.Images;
<img id="someImage" src="">

Below an example using an image from placeholder.com
const a = [{
"Images": "https://via.placeholder.com/100x100"
}];
// Store reference to image tag
const image = document.getElementsByTagName("img")[0];
a.map(function(img) {
// Here just assigning the single image URL
image.src = img.Images;
})
<img src="">

Related

How to get the dimensions of Base64-encoded image in JavaScript [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 22 days ago.
Improve this question
I have a REST API return a Base64-encoded image:
API response
Is there a way to get dimensions (height, width) of this image?
You can create an Image object with the given src and directly access the width and height properties.
let url = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAABp0lEQVR4nO2YzarqMBRG08bUaicRFIWCmSgUnPj+z+BUEQQrxYBQrdCiVMnPGfTCvehtztmj42CvUUv297GSQAf1VqsV+Tz83xb4P6gFAbUgoBYE1IKAWhBQCwJqQUAtCKgFAbUgfKhWx7283W7ruiaEhGGYJImU8nK5dLtdIUQYht+2v8QJIT9scGlZaz3PWy6XzWtVVff7fbFYVFV1PB5ns5nb6SUOanBd4uPxMMas1+vNZlOW5e12GwwGlFLO+fP5tNY2Y+fzOU1TQsjhcMjzvC1OCGlrgGnVdc0YS5JECJFlmda60/lzur7vG2Oa5+FwaK3d7/fGmNFo1Ba31rY1vOO6RM4555wQEkURY4xSqrVulrTWvv93S+PxeLfbzedzR1wp5Wh4wXVaeZ6naaqUqqrKGBNFUVEUSqnr9RoEged5zZi1VkoZx7GU8t97eYkzxtoa3vEcv0aMMVmWlWUZBMF0Ou33+1LKoigYY0KIXq/XjEkpKaWTyeR0Ommt4zhuizfD7w0wrV/kQz+nqAUBtSCgFgTUgoBaEFALAmpBQC0IqAXhCy1TEI1gV/YFAAAAAElFTkSuQmCC';
// same image as https://via.placeholder.com/50x50
let img = new Image();
img.src = url;
img.onload = function() {
console.log(img.width, img.height);
}
document.body.append(img); // just for demonstration

Converting a javascript string into an existing javascript variable [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I am stuck with this problem. I have a function to accept the path and also the same time I have a variable that I want to condition with.
Here is my problem: I want to make a string type that will act as an access to my variable.
In my situation, I have a roles.operation variable which I want to access it dynamically.
The roles variable has an array with the values of:
roles.operations = ['document','article','document-type'];
with this variable I want this to be access dynamically.
Here is what I've tried, which in replacePath i have the value of document-type:
export const createVariable = (roles,path) => {
const replacePath = path.replace(/-/g,"_");
const finalPath = window[`roles.operations.${replacePath}`];
console.log(finalPath);
}
this gives me undefined.
Try this way:
const finalPath = window['roles']['operations'][replacePath];
or
const finalPath = window.roles.operations[replacePath];

Why does JSON.parse() add numbers in front of elements? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 years ago.
Improve this question
I have a string where I build my build my "json-like" format, like
_toBeFormated =
[
{"foor":"bar","foo":"bar","foo":["bar,bar"]},
{"foor":"bar","foo":"bar","foo":["bar,bar"]},
{"foor":"bar","foo":"bar","foo":["bar,bar"]}
]
But after calling JSON.parse like _afterFormat = JSON.parse(_toBeFormated), my structure looks like the following:
_afterFormat =
0:{"foor":"bar","foo":"bar","foo":["bar,bar"]},
1:{"foor":"bar","foo":"bar","foo":["bar,bar"]},
2:{"foor":"bar","foo":"bar","foo":["bar,bar"]}
If I try to change to JSON Format at the beginning, like leaving out [ ], if failes to parse, also it looks like valid JSON to me. What am I missing, or why does it add the numbers at the beginning?
It doesn't add numbers. The data structure is an array. The tool you are using to look at the array is showing the index of each entry.

How to get hold of a part of dynamically generated URL [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I'm using filestack, when ever I upload an image it creates an unique url for the uploaded Image. I want to get hold of a specific part of a url to a variable.
https://www.filestackapi.com/api/file/qiXTZ0dQUGPQRG4GH0Cy
https://www.filestackapi.com/api/file/"qiXTZ0dQUGPQRG4GH0Cy"
The above Url belongs to an image, but I want get hold of the quoted part to a variable, how to do that?
You can search for the last index of / in the url then make a substring of the url starting from that point.
var url = 'https://www.filestackapi.com/api/file/qiXTZ0dQUGPQRG4GH0Cy';
var lastIndex = url.lastIndexOf("/");
var searched = url.substring(lastIndex + 1);
// searched = qiXTZ0dQUGPQRG4GH0Cy

How to make the following JavaScript code work and result in a list of names and ages inside the element with ID "myDivId" : [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
How to make the following JavaScript code work and result in a list
of names and ages inside the element with ID "myDivId" :
<div id="myDivId">No results yet</div>
<script>
new PersonPrinter("myDivId",[{"name":"Joe","age":"23"}
{"name":"Sam","age":"31"}]).render();
</script>`
In the PersonPrinter render function you need to update the div
PersonPrinter.prototype.render = function(id,data) {
var elem = document.elementById(id);
for (var i =0;i <data.length;i++) {
var d = dcoument.createElement('div');
d.appendChild(document.createTextNode('Name'+data.name +' Age:'+data.age');
elem.appendChild(d);`enter code here`
}
}
You need to access div id using innerHTML
var a = Document.getElementById('myDinId');
And for changing value use simply = operator
a.innerHTML = 'Something';

Categories

Resources