I created a HTML page.
Now, I try to display all the pictures that are in a specific folder (/folder1) in this HTML page (Note: I don't know the names of these images).
I try to create a loop, which read all this images, and display it in this HTML.
There is an easy way to do that?
You are looking for something which HTML cannot do. You are going to need some sort of backend language, whether that be Rails, PHP, Python, or something else doesn't really matter.
HTML is and always will be only a Markup Language.
Here is a similar post which has code that might help you:
How To Display All Images in Folder
With php you can use function scandir() to retrieve all the files in a directory, and save them as an array.
Then iterate over that array and display any image with something like:
echo '<img src="path/to/folder1/'$files_array[i]'">
where $files_array contains the names of every image file in that directory.
if your images are stored in a server you can read the directory and get the image name them send to the font end.
if you are work in a local file system such as
/dir/index.html
/dir/images/
/dir/images/xxx.png
/dir/images/aaa.png
/dir/images/other image.png
you can rename all images in batch to 1.png 2.png 3.png ...and so on then use javascript in html to
generate the image
var body = document.getElementsByTagName("body")[0];
for (var i = 0; i < 100; ++i) {
var img = document.createElement("img");
img.src = "images/" + i + ".png";
body.appendChild(img);
}
Related
I have an R markdown document which is created using a shiny app, saved as a HTML. I have inserted a logo in the top right hand corner of the output, which has been done using the following code:
<script>
$(document).ready(function() {
$head = $('#header');
$head.prepend('<img src=\"FILEPATH/logo.png\" style=\"float: right;padding-right:10px;height:125px;width:250px\"/>')
});
</script>
However, when I save the HTML output and share the output, of course the user cannot see the logo since the code is trying to find a file path which will not exist on their computer.
So, my question is - is there a way to include the logo in the output without the use of file paths? Ideally I don't want to upload the image to the web, and change the source to a web address.
You can encode an image file to a data URI with knitr::image_uri. If you want to add it in your document, you can add the html code produced by the following command in your header instead of your script:
htmltools::img(src = knitr::image_uri("FILEPATH/logo.png"),
alt = 'logo',
style = 'float: right;padding-right:10px;height:125px;width:250px')
I'm using asset pipeline in Grails 2.5.x. I'm put the img folder which contains images into asset folder.
However in js file, I cannot use <assets:image tag in the image path.
For example:
controlHTML: '<img src="../img/up.png" style="width:40px; height:40px" />'
I can get to the path but in web inspect element, the path is incorrect: 'localhost:9090/CardReg/img/up.png'
Error when I put
controlHTML: '<img src="<asset:image src='../img/up.png'/>" style="width:40px; height:40px" />'
Any ideas?
Any solutions will be appreciated. Thanks you.
Grails tags are not usable from within a .js context. Only from within a .gsp
I would recommend putting
<asset:script>
var contextPath = "${request.contextPath}";
</asset:script>
In your main gsp layout file, and then from your js you can reference images via
var myImage = contextPath + "/assets/myImage.jpg"
I also recommend practicing smart javascript, so you might want to put any of these layout variables declared into an object to act as a namespace.
Also make sure that the script block is the very first script imported.
I put the user uploaded image files on separate disk partition on my local dev server(OS windows) which is outside of project folder. I need to access those image files in html pages of web app.
I tried out giving paths like: http://localhost:8080/C://tmp/thumbnails/pl_2001.JPEG but no help. Image is not fetched. How to properly access such files in html pages ?
You will have to use rewrites for this so you don't display sensitive folder names.
if you are using php you can use .htaccess rewrites for a slug something like images/someimage.mime and split/get what's after images/ and have a php function that takes the filename and makes sure it exists and if you want you can check if its a valid mime then send a header to say its a image/somemime so the browser can display the image instead of gibberish it will display without it.
$filename = "C://tmp/" . $file;
if(file_exists($filename)){
$img = getimagesize($filename);
if(in_array($img['mime'], array('jpg','jpeg','gif','png','etc'))){
header("Content-type: image/" . $img['mime']);
readfile($filename);
}else{
//default image
}
}else{
//default image
}
I haven't tested this but it should give you a idea on getting you started. If this isn't the language you are looking for try searching for something similar for your language you are using.
I was given an html log file that has ~306K lines. I know there are better formats for this but would like to be able to view the file online. I think breaking the file up into smaller bits and "paging" is probably the way to go of any way other than manually doing the following:
take header of initial page and copy to every new file
copy 5-10k lines of the initial file and paste into a new body
copy the footer of the initial file and copy to every new file
Then give basic naming conventions of 1.html, 2.html, 3.html and create sublinks on every page in the new footer. Is there an automated way to do this?
You can use something like this
text = document.getElementById('text').value; var pieces = new Array(); var total = Math.ceil(text.length/10000); for(i=0;i<total;i++){
pieces[i] = text.substr(([i]*10000),10000)); }
then send it to a file(the way you want, ajax, or some write-txt)
if your html file is properly formatted (i.e with line-breaks) you can take out the header and footer and split the content every let's say 1000 lines (or any amount that guarantees meaningful data). that sound's doable with a shell script.
Images are stored in the folder name upload in my website directory.
can anybody tell me how will i display it in another page name show.php
This question might be very basic level but I am very new to php.
Scan the directory for all image names and then output the image tag with the src set to the path for the image.
<img src="/upload/name-of-image-file-here" />
assuming the upload directory is web-accessible and whatnot. If not, then you'll need to do a script to handle the output of the image, of which there are plenty of sample questions/answers on this site.
You want to use PHP to scan the directory with the images in it and then generate HTML to show them.
You might want to look into the Directory Iterator object. You can use that to loop through the images and then generate the HTML as needed.
For getting files, you might want to use the following code (based on this PHP Documentation sample):
<?php
$iterator = new DirectoryIterator(dirname(__FILE__));
foreach ($iterator as $fileinfo) {
if ($fileinfo->isFile()) {
//Add filetype check here and then echo the HTML
echo $fileinfo->getFilename();
}
}
?>