Local Image Paths in HTML for Browser Widget Fails

[Mike Bonner]

It may be easier if you hit the file directly..

Build up your path string to the html file and put it into a variable
(including the file itself)

Then rather than grabbing the contents of the file, first edit and hard
code a relative path to your image in the file itself.

Then load the file as a url appearing like so..

"file:///path/to/your/html/file/myfile.html"

At this point the browser widget has a path location so any relative
addressing should work.


It doesn't work to relative reference when you set the htmltext unless you
give a proper frame of reference.  IE by setting the defaultfolder to the
location of the html file.  (I think it will work that way)  Otherwise the
browser widget has no frame of reference to locate things.

As far as why your line:
put path_Assets() & "img/global-icons/ajax_loader_big.gif" into imgPath
 and then pasting it in, isn't working..  Not sure, seems like it should
work.

After load is complete, have you looked at the htmltext of the widget to
see exactly what is showing up as the src in the img tag?

On Sat, Jan 6, 2018 at 12:45 PM, Sannyasin Brahmanathaswami via
use-livecode <use-livecode at lists.runrev.com> wrote:

> I'm trying to send some local html to the browser widget to display a
> local loading GIF until the page "comes down" from the cloud. This needs to
> work on mobile too.
>
> the directory structure
>
> main app folder
>    /assets
>       /img
>           /global-icons
>               ajax_loader_big.gif"
>       /info
>             web-loading.html
> views
>    view_Browser.livecode # Card 1 has the browser widget…
>
> I have this in the preopenstack handler
>
> setWebURL
>
> command setWebURL
>        put path_Assets() & "info/web-loading.html" into tLocalPath
>        put url ("binfile://" & tLocalPath) into tLoader
>        put path_Assets() & "img/global-icons/ajax_loader_big.gif" into
> imgPath
>        replace "##IMAGE-PATH##" with imgPath in tLoader
>        set the htmlText of widget "body" to tLoader   # html is set, but
> img not found
>        put tLoader # let's see what we are getting..
> end setWebURL
>
> path_Assets() function returns the  specialFolderPath("resources") &
> "assets/"
>
> it is working for the html itself, but inside html both of these fail
>
> # full URL from "root"  which would translate correctly on mobile to the
> app package…
>
> <img src="/Users/Brahmanathaswami/Documents/_Siva-Siva-App/
> assets/img/global-icons/ajax_loader_big.gif" width="128" height="128"
> alt="ajax_loader_big">
>
> # I manually tried a relative path
>
> <div class="container">
> <img src="../assets/img/global-icons/ajax_loader_big.gif" width="128"
> height="128" alt="ajax_loader_big">
> </div>
>
> The html is found because we see in the browser widget the broken image
> icon with the name "ajax_loader_big" so the path function works, html is
> set as expected, but the browser widget can't find the image locally.
>
> I can "proof" this locally by moving a copy of web-loading.html into the
> same folder as the stack..
> drag and drop onto a browser from that location, which is the same
> location as the stack with the browser widget…
>
> both of these work
>
> src="/Users/Brahmanathaswami/Documents/_Siva-Siva-App/
> assets/img/global-icons/ajax_loader_big.gif"
> src="../assets/img/global-icons/ajax_loader_big.gif"
>
> I could have sworn I had this working last year, but not today.  At that
> time we were working right in the same directory… so I tried this:
>
> views
>    /img
>        ajax_loader_big.gif
>    view_Browser.livecode
>    web-loading.html
>
> src="img/ajax_loader_big.gif"  in the html for the browser widget but it
> still can't find it
>
> What am I missing?  Why can't the browser widget find the image?
>
> BR
>
>
>
>
>
> _______________________________________________
> use-livecode mailing list
> use-livecode at lists.runrev.com
> Please visit this url to subscribe, unsubscribe and manage your
> subscription preferences:
> http://lists.runrev.com/mailman/listinfo/use-livecode