[Ionic 4] Handling static files with angular framework

Ionic Framework
1

Did this change with angular from v3? I can’t seem to find any static images in the app. Usually the path was relative to the www (root) folder. This is my current structure:

--- www
     --- assets
          --- images
               --- logo.png
               --- header.png

Trying to access it with => assets/images/logo.png but it can’t find it.

export class LoginPage implements OnInit {
   private logo: string = 'assets/images/logo.png'
}

<div [ngStyle]="{'background-image': 'url(' + logo + ')'}"></div>

Any help is appreciated.

2

if it is ionic3, you are looking at this structure

--src
   --assets
      --img
         --logo.png

where src is your root directory,
NOTE, everything, www is only loaded during execution and files their get changed as soon as there is change in src directory.

So, your focus should be mostly on src not www

3

Thank you for your answer. :slight_smile: Look at the title though => Ionic 4.

4

For I4 this question seems irrelevant to me

The answer lies in the underlying framework u want to use and the cli build tools that go along with it expecting and delivering a folder structure. Or none at all if u use the CDN in plain vanilla HTML files. Then it is up to you where u place the files as long as they are on the same server

In v3 this is angular and angular u can still use in v4, where ionic delivers ionic-angular out of the box

But for other frameworks this can be different

5

Isn’t angular the only supported framework at the moment?

6

Nope
It is the only somehow properly documented framework and bundled in the Ionic CLI

A seasoned react or vue person should already be able to integrate I4, including their CLI tools

Idem plain HTML

Check blog of Josh Morony on I4 with other frameworks

7

Alright, thanks. Updated the question. Still can’t show static files in my app though.

8

Ok
Please post the code u use to access (http?)

9

updated OP with extra information.

10

Does the file definitely exist in the build, or in the dist version? Angular 6 has issues with building npm packages, because it doesn’t copy over all the assets files. So I suspect Angular might be your problem, not Ionic.

11

Whether it is 3 or 4, the file structure hasnt changed much

12

This is does not seem to me as not proper angular way of inserting variables (interpolation). But I may be wrong. Nevertheless, I wouldn’t do this in the template, but in the TS code. Just to be sure I don’t screw up the syntax (matter of taste, I guess). Angular

Plse try to see if any of the following gives an image:

<img [src]="logo">
<img src="assets/images/logo.png">

If so, then I am sure it is not the location of the asset, but your angular code. If not, it can be an issue with the build script as @AaronSterling says.

Maybe do ionic build and check the www folder? (or is it dist folder?) to see if it has an asset subfolder

13

Try:

ionic start MyIonic4Pwa tabs --type=angular

Then check, index.html:

<!doctype html>
<html lang="en">
<head>

  ...

  <base href="/" />

  ...

</head>
<body>

  <app-root></app-root>

</body>
</html>