i am working with mobilefirst project.
I am facing an issue of not able to load an image in javascript. My image is placed inside a images folder. when i check the console is added inside the div and tool tip over that srctells Could not load the image.
jQuery('#placeher').show();
// var table = $('#mydemo1');
for (var i = 0; i < result.length; i++)
{
doc1=result[i];
if(doc1.PHOTO == "")
{
var elem = document.createElement("img");
elem.setAttribute("src","../common/images/Icon-60.png");
elem.setAttribute("height", "60");
elem.setAttribute("width", "60");
document.getElementById("placeher").appendChild(elem);
}
}
The correct path to use for the images folder is simply images/<image file name>. For example: <img src="images/thumbnail.png"/>.
Related
Good day! So I have been practising web development again and found Laravel to be fun to learn (and I'm enjoying it a lot) and I have decided to recreate my portfolio website with it to practice it.
So the problem is this:
I am trying to display a list of images from a folder called designImages and this will be updated every time I have a good UI design. so it makes sense to make it dynamically ready so I do not have to manually add <img> tags for every image and make my process a lot longer. I plan to just make a js file that will only be adjusted once depending on how many images are currently in the folder.
But the problem is when I display the images on my blade page, it shows the broken image icon
view it here
EDIT: When I try to inspect element, the image is not displaying and instead, shows 404 error. mywebsite.test/designImages/design-1 for example.
The code on my js file is this
const imageContainer = document.querySelector(".imageContainer");
for (let i = 1; i < 14; i++) {
const img = document.createElement("img");
img.src = "{{ asset('designImages/design-${i}.png') }}";
imageContainer.append(img);
}
and the code for the master file (app.blade.php) for my index.blade.php is:
<body>
#yield('content-5')
#stack('head')
</body>
and the index.blade.php code is this:
#section('content-5')
<div class="imageContainer">
<!-- images will come here -->
</div>
#endsection
#push('head')
<script src="{{ asset('js/imageGrid.js')}}"></script>
#endpush
Any help or tips will be greatly appreciated :)
-----EDIT-----
Fixed it! :) the updated javascript code is this:
const templateURL = "storage/designImages/design-?.png";
const imageContainer = document.querySelector(".imageContainer");
for (let i = 1; i < 14; i++) {
const img = document.createElement("img");
img.src = templateURL.replace("?", i);
imageContainer.append(img);
}
fixed it using this code:
const templateURL = "storage/designImages/design-?.png";
const imageContainer = document.querySelector(".imageContainer");
for (let i = 1; i < 14; i++) {
const img = document.createElement("img");
img.src = templateURL.replace("?", i);
imageContainer.append(img);
}
I'm actually trying to find a way in a js script to downloading the three first images from a specifiq URL.
I have find this way to download img file as a new filename, but this script don't limit the imgs downloads to three:
download-data-url-file.
Why only the three images from an URL ?
Because i would like to setup later a sort of timer to repeat the downloading task.
The URL is a content feed (http://feed.500px.com/500px-best)
Basically, the img source URL is avalaible if we enter in the Inspector tool on Firefox, we can see the URL source for a give image like:
<img xmlns="http://www.w3.org/1999/xhtml" src="https://drscdn.500px.org/photo/266885357/m%3D900/v2?webp=true&sig=b5a6df5651c4248defdeee0f5b4d1ec599d87d5fa69e7673b5d64cef5a4deeb7" />
So the js script will take the first image from the website, and download the .png image as a newfilename.png (just an filename exemple), reapeat the step for a second and a third image, and stop to run.
There is an short js that i have modded for my task, i assume that i can improve it by adding an var totalImages = 3 to limiting the total img downloads..
var data = canvas.toDataURL("http://feed.500px.com/500px-best/jpeg");
var img = document.createElement('img');
img.src = data;
var a = document.createElement('a');
a.setAttribute("download", "Image1.jpeg");
a.setAttribute("href", data);
a.appendChild(img);
Thank in advance.
// This code is very specific to 500PX
// I had to use itemcontent selector, as the feed was giving small icons
// as first three images.
var parents = document.getElementsByClassName("itemcontent");
var totalImages = 3;
var done = false;
var result = [];
for(var i = 0; i < parents.length && !done; i++) {
var images = parents[0].getElementsByTagName("img");
for(var j = 0; j < images.length && !done; j++) {
result.push(images[j].src);
if(result.length == totalImages)
done = true;
}
}
// The result array contains the first three images of the page.
I would like display some images inside html page(offLine) using JS.
I have a folder with an index.html and a folder called "images" with JPG inside.
If I have 10 images, display 10, if I have 3 display 3 inside html
Is it possible do this?
I tried lots of tutorials but unsuccessfully.
Regards, Fernando.
I think you can't browse read file from js on your computer. However you can browse file using FileReader API of HTML5.
It's not possible to list directory contents by opening a local page in the browser. However if these files were named following a predictable pattern then you could try to display them by "guessing" the file names.
For example assuming images are named 1.jpg, 2.jpg etc. The script will try to append images 1...N as long as N.jpg exists and will terminate upon the first file name that fails to load.
var index = 1;
var tempImg = new Image();
tempImg.onload = function(){
appendImage();
}
var tryLoadImage = function( index ){
tempImg.src = 'images/' + index + '.jpg';
}
var appendImage = function(){
var img = document.createElement('img');
img.src = tempImg.src;
document.body.appendChild( img )
tryLoadImage( index++ )
}
tryLoadImage( index );
You can load images with javascript, it will depending on how you name the files.
// create image
var img = new Image();
// add src attribute
img.src = "images/" + filename;
// when image is loaded, add it to my div
img.addEventListener("load", function(){
document.getElementById("mydiv").appendChild(this);
});
You can achieve this using ajax like in this jQuery example:
var dir = "Src/themes/base/images/";
var fileextension = ".png";
$.ajax({
//This will retrieve the contents of the folder if the folder is configured as 'browsable'
url: dir,
success: function (data) {
//List all .png file names in the page
$(data).find("a:contains(" + fileextension + ")").each(function () {
var filename = this.href.replace(window.location.host, "").replace("http://", "");
$("body").append("<img src='" + dir + filename + "'>");
});
}
});
taken from:
How to load all the images from one of my folder into my web page, using Jquery/Javascript
I'm trying to show images in a local html file using a loop. This is what I want it to show in the web browser:
<div id="polybridges">
<img src="polybridge_1.gif">
<img src="polybridge_2.gif">
<img src="polybridge_3.gif">
<img src="polybridge_4.gif">
<img src="polybridge_5.gif">
</div>
This is my attempt to do this with javascript:
<script>
for(var i = 1; i <= 5; i++) {
var elem = document.createElement("img");
elem.src='polybridge_'+i+'.gif';
document.getElementById("polybridges").appendChild(elem);
}
</script>
<div id="polybridges">
This doesn't generate anything. Is there a way to show images in a loop without using a server / localhost?
At first your element must be defined before script execution (so change the order). I suppose you want to append elem (instead of "hallo" string):
<div id="polybridges"></div>
<script>
for(var i = 1; i <= 5; i++) {
var elem = document.createElement("img");
elem.src='polybridge_'+i+'.gif';
document.getElementById("polybridges").appendChild(elem);
}
</script>
Put your images in the same directory as your html file.
for(var i = 1; i <= 5; i++) {
var elem = document.createElement("img");
elem.src='polybridge_'+i+'.gif';
document.getElementById("polybridges").appendChild(elem);
}
And change the argument for appendChild.
As malix states in his comment, you should use document.getElementById("polybridges").appendChild(elem); instead of document.getElementById("polybridges").appendChild("hallo"); (so append the element instead of string "hallo").
And, as the rest states, the images should be where you tell the browser they are.
Yes you can display images without server, you have to have that images in same directory as your html file or in images folder which in same level as your html file ( for that case images would be available as <img src="images/polybridge_5.gif">
appendChild take Node as parameter (not string)
for(var i = 1; i <= 5; i++) {
var elem = document.createElement("img");
elem.src='polybridge_'+i+'.gif';
document.getElementById("polybridges").appendChild(elem);
}
You need to take care of one thing. You are trying to get element by ID. So you need to make sure that html is valid. Provide proper close tag for the element. Also use the elem variable in the appendChild().
for (var i = 1; i <= 5; i++) {
var elem = document.createElement("img");
elem.src = 'polybridge_' + i + '.gif';
console.log(elem)
document.getElementById("polybridges").appendChild(elem);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="polybridges"></div>
I have a file called src.js which has all the scripts for my html page.
now on my html page I am using this :
<script language="javascript" src="src.js">
</script>
to call the .js file to use it.
I am not sure how to set up the images links in the .js file or how to call them in the .html file
I need a simple answer please :)
You need to have a placeholder for your images in the HTML otherwise you would need to dynamically modify the HTML DOM structure.
As for using variables for image links, refer to the code below which pre-loads the images.
if (document.images)
{
preload_image_object = new Image();
// set image url
image_url = new Array();
image_url[0] = "http://mydomain.com/image0.gif";
image_url[1] = "http://mydomain.com/image1.gif";
image_url[2] = "http://mydomain.com/image2.gif";
image_url[3] = "http://mydomain.com/image3.gif";
var i = 0;
for(i=0; i<=3; i++)
preload_image_object.src = image_url[i];
}
The browser must have the document.images attribute defined.
<div id="_images"></div>
<script>
var images = { // images with properties
image1 : {url:'http://image1',property:'value'},
image2 : {url:'http://image2',props:[],else:'val'}
}
for(var i in images){
var image = new Image();
image.src = images[i].url;
// put image anywhere you want
document.getElementById('_images').appendChild(image)
}
</script>