Read the image source path from a text file in html

0
votes

I have to display a sequence of images as a slideshow. I will have the path of the images in a text file. How read the image path from a text file ? Right now I have a hardcoded code like below:

<div class="mySlides fade">
  <div class="numbertext">1 / 3</div>
  <img src="img_nature_wide.jpg" style="width:100%">
  <div class="text">Caption Text</div>
</div>

Example text file with image paths:

https://res.cloudinary.com/demo/image/upload/sample.jpg https://res.cloudinary.com/demo/image/upload/v1/folder1/folder2/sample.jpg

3
javascripthtml
HTML alone cannot do this, use Javascript. Host your urls.txt on your server example.com/urls.txt, then request the URL with Ajax and parse the response. – ABC

3 Answers

1
votes

The easiest way would probably be to store your urls in a JSON encoded file, and use fetch to retrieve it.

Imagine, you have the following JSON file in your server : 

"[
"https://placekitten.com/408/287",
"https://placekitten.com/200/286",
"https://placekitten.com/200/139"
]"

You can retrieve the file using fetch, and operate with the resulting array of urls, to populate your slideshow :

fetch('http://example.com/yourFile.json')
.then(function(response){
    // parse the fetch response
    return response.json();
})
.then(function(myJson){
    // do whatever you need with the image paths array...
    console.log(myJson);
});
1
votes

First you must understand that javascript alone can't access other files in your server there will always be a need for php weather you implement ajax or not so here is a php example asssuming you have a text file urls.txt with the following contents

https://res.cloudinary.com/demo/image/upload/sample.jpg https://res.cloudinary.com/demo/image/upload/v1/folder1/folder2/sample.jpg

//Get the contents of the text file
$text = file_get_contents("path/to/urls.txt");

//Split them by the seperate lines
$textArr = explode("\n",$text);

//loop through the array
for($i = 0; $i < count($textArr); $i++){
  //Echo the images
  echo "<img src='" . $textArr[$i] . "' style='width:100%'>";
}
1
votes

In regards to my comment, you request a URL and then parse the response and do something with it not with HTML but with Javascript.

We start by waiting for the document to load.

  • After the the document loads, we wait for a button click.
  • When button is clicked we Fetch a URL, in your case a http://example.com/file.txt text file.
  • We then grab the body text by using response.text(), now we can do something with it such as add the response to the results div.

Fetch Documentation: Fetch

// When document is loaded and ready
$(document).ready(function(){
    // On button click initiate
    $("button").click(function(){
        // Request URL, change to http://example.com/file.txt
        fetch('https://api.ipify.org?format=json')
            .then(response => response.text())
            .then(data => {
                // Log body text
                console.log(data);
                // Set #results text to body text
                $('#results').text(data);
            })
    });
});
<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>

  <div id="results"></div>
  <button>Get External Content</button>

</body>
</html>