Not able to load the image in cumulocity template

[Sam123 (Samanyu Mehra)]

What product/components do you use and which version/fix level are you on?

Cumulocity

Is your question related to the free trial, or to a production (customer) instance?

Free Trial

What are you trying to achieve? Please describe it in detail.

Hi, I am using cumulocity tutorial template and I have created my widget in that. I am trying to load up an image in that, but it is not able to display it. I have tried all the paths and different file formats but none of them are working. Can you tell me what path to give for an image to get it displayed. The app runs on http://localhost:9000/apps/widget-app/#/named-dashboard

Please suggest me some solution regarding the same

html file that i am using:

<div class="card-dashboard">
 <div class="title">
 <p>Chlorine Briquette/Tablets</p>
</div>
<div class="middle-div">
<p class="numbers">19.76 <span>lbs</span></p>
<div class="img"><img src="./test-tube.svg" alt="cal-image"></div>
</div>
<div class="bottom-para">
<p>Units in lbs</p>
</div>
</div>

Also this is the project structure:

[Tristan_Bastian]

Hi Samanyu,

The images are not directly part of your webpack bundle.
You can configure e.g. the Webpack copy plugin using this application option: Web SDK documentation to make them part of your bundle. You could e.g. copy an asset folder to your build this way.

Other approaches that should also work are to require/import the image in your typescript file and assign it to the src attribute of your image tag.
Or you can try to set the image e.g. as a background in your stylesheet.

[Sam123 (Samanyu Mehra)]

Hi Tristan,

I tried all the methods above except the GitHub one. Both of them aren’t working, also I don’t know how to use that GitHub one. If there is any working example for the same, please point out that for me. Also if you could explain it a bit, it would be great because I didn’t get the use of using that webpack like why would I want to transfer my folder of images, how would it load images on my local host environment.

Regards,
Samanyu

[Pawel_Rynarzewski1 (Paweł Rynarzewski)]

Hi Samanyu, you may try the following approach:

in package.json add copy with the list of paths (e.g. particular image file or even better the assets folder) you would like to include, for example:

{
  "name": "tutorial-application",
  (...)
  "c8y": {
    "application": {
      "name": "tutorial application",
      "contextPath": "tutorial-application",
      (...)
      "copy": [
        "custom-widgets/component/test-tube.svg"
      ]
    }
  }
  (...)
}

and then in your template:

<div class="card-dashboard">
  <div class="title">
    <p>Chlorine Briquette/Tablets</p>
  </div>
  <div class="middle-div">
    <p class="numbers">19.76 <span>lbs</span></p>
    <div class="img"><img [src]="'test-tube.svg'" alt="cal-image"></div>
  </div>
  <div class="bottom-para">
    <p>Units in lbs</p>
  </div>
</div>

Such an image should be displayed both during local development as well as in the deployed app.

[Sam123 (Samanyu Mehra)]

Hi Pawel,

Thank you for your response. I already solved this issue with some other person help, although i will mark this as answer. Have a good day

Best Regards,
Samanyu