# Simply display an image; getting a 404 instead

**URL:** <https://community.cumulocity.com/t/simply-display-an-image-getting-a-404-instead/7341>\
**Category:** Forum\
**Tags:** cumulocity\
**Created:** [March 29, 2022, 11:29am UTC](https://community.cumulocity.com/t/simply-display-an-image-getting-a-404-instead/7341 "2022-03-29T11:29:39Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Frank\_Wiebeler](https://avatars.discourse-cdn.com/v4/letter/f/9fc348/32.png) [@Frank\_Wiebeler](https://community.cumulocity.com/u/Frank_Wiebeler)\
**Post date:** [March 29, 2022, 11:29am UTC](https://community.cumulocity.com/t/simply-display-an-image-getting-a-404-instead/7341/1 "2022-03-29T11:29:39Z")

</div>

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

Product: Cumulocity IOT FrontEnd Version 1011.0.12

#### What are trying to achieve? Please describe in detail.

I’m trying to create a widget and was able to display text.  
Now I’m trying a super simple thing: I want to load an extra resource; e.g. an image in a fixed ![]() Tag, but I don’t understand what the correct folder structure is.  
Problem: I receive a 404 “[http://localhost:9000/apps/ptk-cockpit/assets/logo\_hoch.png](http://localhost:9000/apps/ptk-cockpit/assets/logo_hoch.png)”

Folder Structure (currently):

```auto
- app    
    - assets
        - logo_hoch.png
    - ptk-cockpit
        - assets
            - logo_hoch.png
        - logo_hoch.png
    - logo_hoch.png
- node_modules
    - ...
- logo_hoch.png
- app.module.ts
- index.ts
- ng1.ts
- package.json
- ...

```

Where does the damned logo have to go so that it is loaded?

---

<div class="post-metadata">

**Author:** ![Darpankumar\_Lalani](https://avatars.discourse-cdn.com/v4/letter/d/e9bcb4/32.png) [@Darpankumar\_Lalani](https://community.cumulocity.com/u/Darpankumar_Lalani)\
**Post date:** [March 30, 2022, 8:14am UTC](https://community.cumulocity.com/t/simply-display-an-image-getting-a-404-instead/7341/2 "2022-03-30T08:14:51Z")

</div>

Hi,

you can keep assets folder at root level for example  
assets → logo\_hoch.png your image tag should be something like  
\<img src=“./assets/logo\_hoch.png”\>

---

<div class="post-metadata">

**Author:** ![Hendrik\_Naether1](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/hendrik_naether1/32/17494_2.png) [@Hendrik\_Naether1](https://community.cumulocity.com/u/Hendrik_Naether1)\
**Post date:** [May 2, 2022, 3:20pm UTC](https://community.cumulocity.com/t/simply-display-an-image-getting-a-404-instead/7341/3 "2022-05-02T15:20:01Z")

</div>

Hi Frank. Did the suggestion of Darpankumar solve your issue?  
Another thing to mention is - images you add to your project aren’t automatically added to your build.  
In order for that to work, you need to create a webpack config.

How to setup the copy webpack plugin:

- install using npm i copy-webpack-plugin
- create a file in your root folder, called extra-webpack.config.js with the content:

```auto
const CopyPlugin = require('copy-webpack-plugin');
module.exports = config;
function config(env) {
  'use strict';
  return {
    plugins: [
      new CopyPlugin([
        { from: './assets', to: 'assets' }
      ])
    ]
  };
}

```

- extend your run and build script in your package.json, add --env.extraWebpackConfig=./extra-webpack.config.js

This will make sure that all e.g. images you put under the assets folder will also be copied into your build.

---

<div class="post-metadata">

**Author:** ![system](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/system/32/31990_2.png) [@system](https://community.cumulocity.com/u/system)\
**Post date:** [July 31, 2022, 3:20pm UTC](https://community.cumulocity.com/t/simply-display-an-image-getting-a-404-instead/7341/4 "2022-07-31T15:20:57Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.