HTML/Javascript - Get image source from online file_问答_开发者

HTML/Javascript - Get image source from online file

开发者 https://www.devze.com 2023-03-07 07:43 出处：网络

I want to have an image in a webpage that can be changed based on the filepath stored in a file online (it doesn\'t matter what typer of text file - xml, .txt - whatever works best).

相关专题：javascript

I want to have an image in a webpage that can be changed based on the filepath stored in a file online (it doesn't matter what typer of text file - xml, .txt - whatever works best). So I basically want to have the page retrieve the text from that file, and then use that text as the source for an image in that page. I'm assuming this is a Javascript thing, but it doesn't matter to me, as long as it works. Any ideas? Thanks!!

**Edit: Forgot to mention: I'm using the code in a Google Chrome Extension, not sure that matters, as it uses regular HTML/Javascript, but it's stored on the users computer, and I want the image to be stored on my server.

**Edit2:

Just got something that seems to work very well, and I only need this in the body part of the code:

开发者_运维知识库

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

Hope this is valid code, but it definitely seems to work here...

Its simple store the filepaths in a Javascript file , create an array in the JS file , and include all the filepaths in the array, then store the file on the webserver .

Then after that you can retrieve it using

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

After you retrieve it , you can use Javascript , I prefer jQuery , to replace the src attribute on the Image with the one from the array .

EDIT : Full version :

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

Create a file like this and store as many paths as you want in the array .

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

This is a simple example , you can try learning javascript and Jquery to tweak it further .

Since my php based answer was not applicable, we can all ignore it now. :)