Insert an Image in a text block

[AlfonsoYañez_Morillo]

Hi all,

This is a very simple task but I cannot figure out how to solve it. I'm working with AppBuilder Developers Edition. I created an informative panel with text and I would like to insert some images.

Simple, only add the img tag and then point to the image with the src parameter.  something like this:

<div>

    <p> here some text <img src="my_image.png" /> more text </p>

</div>

However the  image doesn't appear. The div is in a html file which is in the widget's directory. Initially I tried with the image located in the widget/images directory so I used src="/images/my_image.png" without success. Then I put the image in the same directory of the html changing the src to src="my_image.png", but whitout success again. I also tried with src="/widget/my_image.png" but same result.

The div is place and removed in the panel programmatically and this works fine. My guess is that I can access the correct path of the image because the origin of reference has changed and I don't know how to figure out what it is.

Thanks

Alfonso

[RobertScheitlin__GISP]

Alfonso,

   If the html file is inside the widgets directory then the image src would be "image/my_image.png". But I am a little confused by this statement:

The div is place and removed in the panel programmatically

[AlfonsoYañez_Morillo]

Hi Robert,

Let’s see If I can explain better.

In widgets I have a widget directory where I have two HTML files, widget.html and instructions.html. Instructions.html is made by different

s. Each

is block with text, lists an images that explains how to use the tool. When a tab is active, the block (div) that explains that tab is placed in the panel, that is defined in widget.html, and when another tab is active, the block for that other tab is shown in the panel.
I don’t have problem with that. It works fine.

My problem is that the images I referenced in the instructions.html don’t appear. I have the image in the widget/images/. Opening directly the instructions.html file, the image appears correctly. However when I run the app and the block is shown in the panel, the image never appear. It is substituted by the ‘alt’ text.

I’m working with firefox. There is no error in the console, but selecting the image element in the inspector, appears a message “could not load the image”.

My guess is that when the

is placed in the panel the current directory from which I have to start the path change and I don’t have any idea to know what it is.

Alfonso

[RobertScheitlin__GISP · Accepted solution]

Alfonso,

   When you inspect the img element it will show you the path that it is trying to use for the img src. What is that path currently?

[AlfonsoYañez_Morillo]

Robert,

Thanks, I found it. At first I didn’t understand what you mean, but I found the attribute currentDir in the node, so I have the reference to point to the image.

Alfonso