Simply display an image; getting a 404 instead

,
#1

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”

Folder Structure (currently):

- 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?

#2

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">

#3

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:
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.

1 Like