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