Home/ Questions/Q 5936779
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T15:26:48+00:00

I want to have an image in a webpage that can be changed based

  • 0

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…

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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 .

    • 0