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

【问题标题】：Read the image source path from a text file in html从 html 中的文本文件中读取图像源路径
【发布时间】：2019-04-04 18:22:55
【问题描述】：

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

<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

【问题讨论】：

仅 HTML 无法做到这一点，请使用 Javascript。在您的服务器example.com/urls.txt 上托管您的 urls.txt，然后使用 Ajax 请求 URL 并解析响应。

标签： javascript html

【解决方案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);
});

【讨论】：

【解决方案2】：

首先，您必须了解，仅 javascript 无法访问服务器中的其他文件，无论是否实现 ajax，总是需要 php 天气，所以这里是一个 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%'>";
}

【讨论】：

这是 PHP 部分。我需要做哪些更改才能通过 HTML 访问这些图像？
在 for 循环中，您会注意到 html 在 echo @user2727765 之后

【解决方案3】：

关于我的评论，您请求一个 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>

【讨论】：