How to add images in the vm files or js files...?

1

I want to add image files in the vm files or just other js files…
When I searched answers of my question in the google… they said <img src="$req.contextPath/download/resources/PLUGIN_KEY:RESOURCE_KEY/images/yam_btn.gif">

but… I think there is another way because of it is complicated answer
and then If I choose the answer, I have to write hard coding about PLUGIN_KEY:RESOURCE_KEY to my vm files…

Do U have any ideas??

Here is my web resource part

<web-resource key="portal-automation-issue-jira-resources--planning-page" name="portal-automation-issue-jira Web Resources for Planning Page">
    <dependency>com.atlassian.auiplugin:ajs</dependency>
    <dependency>com.atlassian.auiplugin:aui-select2</dependency>
    <dependency>com.atlassian.auiplugin:soy</dependency>
    <dependency>com.atlassian.auiplugin:aui-date-picker</dependency>
    <dependency>com.atlassian.auiplugin:aui-avatar</dependency>
    <dependency>com.atlassian.auiplugin:aui-badge</dependency>

    <transformation extension="soy">
      <transformer key="soyTransformer">
        <functions>com.atlassian.confluence.plugins.soy:soy-core-functions</functions>
      </transformer>
    </transformation>
    <resource type="download" name="images/" location="/images"/>
    <resource type="download" name="momentjs.js"  location="/js/3rdparty/moment-2.24.0.min.js"/>
    <resource type="download" name="portal-automation-issue-soy.js" location="templates-soy/portal-automation-issue.soy"/>
    <resource type="download" name="portal-automation-issue-page-controller.js" location="/js/portal-automation-issue-page-controller.js"/>
    <context>portal-automation-issue-jira</context>
  </web-resource>

Here is my vm part( I am studying AUI now… but I am stuck with first part)

<span class="aui-avatar aui-avatar-xxlarge">
    <span class="aui-avatar-inner">
        <img src="images/avatar-person.svg" alt="Person McRealface" />
    </span>
    <span class="custom-presence-indicator">
        <svg height="100%" version="1.1" viewBox="0 0 8 8" width="100%" xmlns="http://www.w3.org/2000/svg">
            <description>Online</description>
            <circle cx="4" cy="4" r="4"></circle>
        </svg>
    </span>
</span>
2

So I just took a quick peek at our code…

We specified a resources directory for our images at top level in our atlassian-plugin.xml:

<resource type="download" name="images/" location="/pocketquery-core/images"/>

In our CSS we are then able to just do this:

#pocketquery-header {
    background-image: url("images/logo_bw_24.png");
}

And it works fine:

image
However I might be missing something here because our PocketQuery Administration is a custom Servlet, so there might be something else going on as well. Also in the browser the link actually contains the full URL so there could also be some kind of transformation happening on the CSS.

image
The thing is we don’t have specified any transformers explicitly other than the I18n one for this web-resource.

<transformation extension="js">
    <transformer key="jsI18n"/>
</transformation>

Maybe you could try doing it the same way we are and use CSS? If that doesn’t work for you I actually think hardcoding the plugin key shouldn’t be too bad because it should never change anyway, right?

1 Like