Question

我必须显示一系列图像作为幻灯片。我将在文本文件中获得图像的路径。如何从文本文件读取图像路径？现在，我有一个如下的硬编码代码：

<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>

带有图像路径的示例文本文件：

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

Answer 1

最简单的方法可能是将您的网址存储在JSON编码的文件中，然后使用fetch进行检索。

想象一下，您的服务器中有以下JSON文件：

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

您可以使用fetch检索文件，并使用生成的array网址进行操作，以填充幻灯片：

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);
});

Answer 2

关于我的评论，您先请求一个URL，然后解析响应，然后使用 HTML 而不是 JavaScript 对其进行处理。

我们从等待文档加载开始。

文档加载后，我们等待按钮单击。
点击按钮后，我们会获取一个URL，在您的情况下，我们会提取一个http://example.com/file.txt文本文件。
然后我们使用response.text（）抓取正文文本，现在我们可以对其进行处理，例如将响应添加到结果div。

获取文档：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>

Answer 3

首先，您必须了解，仅JavaScript不能访问服务器中的其他文件，因此始终会需要实现ajax或不实现ajax的php weather，因此这里是一个php示例，假设您有文本文件urls.txt具有以下内容

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%'>";
}

Answer 4

仅HTML可能无法做到这一点，但是您可以使用CSS或JavaScript做到这一点。

在CSS中，您可以添加鼠标悬停/鼠标单击以使用不透明度或使用翻译方式来显示另一幅图像。

在JavaScript中，您可能可以做更多的事情。

也许这可以帮助您：http://css3.bradshawenterprises.com/cfimg/

从html文本文件中读取图像源路径

4 个答案: