HTML/Javascript - 从在线文件中获取图像源

HTML/Javascript - Get image source from online file

本文关键字：获取 图像 文件 在线 Javascript HTML      更新时间：2023-09-26

我想在网页中有一个图像，可以根据在线文件中存储的文件路径进行更改（文本文件的哪个类型无关紧要 - xml，.txt - 无论效果最好）。所以我基本上想让页面从该文件中检索文本，然后使用该文本作为该页面中图像的来源。我假设这是一个Javascript的东西，但这对我来说并不重要，只要它有效。有什么想法吗？谢谢！！

**编辑：忘了提：我正在使用Google Chrome扩展程序中的代码，不确定这很重要，因为它使用常规的HTML/Javascript，但它存储在用户的计算机上，我希望图像存储在我的服务器上。

*

*编辑2：

刚刚得到了一些似乎工作得很好的东西，我只需要在代码的正文部分使用它：

      <script type="text/javascript" >
      var i=0;
      for (i=0;i<=FilePath.length - 1;i++)
      {
      document.write('<img src="' + FilePath[i] + '"/>');
      }
      </script>

希望这是有效的代码，但它似乎绝对在这里有效......

它简单地将文件路径存储在Javascript文件中，在JS文件中创建一个数组，并将所有文件路径包含在数组中，然后将文件存储在Web服务器上。

然后，您可以使用以下方法检索它

<script src="JS_File_path_on_web_server" type="text/javascript" ></script>

检索到之后，就可以用Javascript，我更喜欢jQuery，把图片上的src属性换成数组中的那个。

编辑 ： 完整版 ：

//Javascript web server File
var FilePath=new Array("Path1","Path2","Path3");

创建一个这样的文件，并在数组中存储任意数量的路径。

<html>
 <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
  </script>
  <script src="JS_File_path_on_web_server" type="text/javascript" ></script>
  <script type="text/javascript" >
   $(document).ready(function()
   {
      $('#DisplayImage').attr('src',FilePath[0]);
   });
  </script>
  </head>
  <body>
        <img src="" id="DisplayImage" />
  </body>
</html>

这是一个简单的例子，你可以尝试学习javascript和Jquery来进一步调整它。

由于我基于 php 的答案不适用，我们现在都可以忽略它。 :)

相关文章：