Image in component

[anna_liebt]

Hello,
I made a custom component. In this component I will use for example a image.

Is there a way to add this image to the custom component folder and reference it from this folder.

The idea behind is to store all files, related with this custom component, at one location.

ionic 3.x

Thanks in advance, anna.

[fdom]

All images and assets go into the assets folder but you can make this path:

assets/mycomponent/img1.png

And then in your custom component just add this:

<img src="assets/mycomponent/img1.png">

or

<img [src]="myimage">

if you pass it from your code.

Hope this is what you want and helps you

[anna_liebt]

Thanks for the reply.

Yes I found this kind of solution too. My hope was that I can capsule the component with all parts in it for simpler reuse. I’m struggling a little bit with all this relative (is seems they are different in sass, in component, in browser, on device…) paths.

Best regards, anna

[FrancoisIonic]

Not sure I get your question well Anna, so I would suggest to use a provider.
A provider is a simple service, that is available across all application. In this, I will just show it to use a constant value across all app, but it can do much more than that.

1. Create a provider to define a global “path” value

• Create a provider like this this in ionic cli:
  ionic generate provider mypath
• Include this provider in all your app/project
  Go to edit your global app file located at nameofproject/src/app/app.module.ts
  Include the provider in it, so it will be global for all the app, example including a dummy page and your new provider

// Importing Pages
import { HomePage } from '../pages/home/home'
...
// Importing Providers
import { MyPath } from '../providers/mypath';

• Now that provider is loaded everywhere in the app, we can edit it at: src/providers/mypath.ts, and make something like that:

import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';

/*
  Generated class for the MyPath provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
*/
@Injectable()
export class MyPath {

  public broadcastedProviderPath: any;

  constructor() {

    let broadcastedProviderPath = "/src/images/assets"

    }

  }

2. In any page in your app, on top of page with other calls, call the provider (import { MyPath }) from ‘…/…/providers/mypath’),
   and try to console.log it inside the constructor () to check the value. Console.log should return “/src/images/assets”.

Hope it helps @anna_liebt,

[anna_liebt]

Hello,

thanks for the advice. Yes, the concept of providers help to keep things together.

It seems that I am later must expand my knowledge how paths are created in components, sass and so on. Is there a resource How can I read about paths.

for example I have a www/lib folder. I have made this by advice, that is better, that scripts, that are not installed by npm or bower, will be placed there. Scripts seem working by declaring in index.html, but accessing a file in the same lib folder from a page i was not able to bring it to work.

And sass is in the moment for me a complete black hole.

Best regards anna

[FrancoisIonic]

Hello Anna,

As you probably guessed I’m bad with concepts, that being said, search on google and in ionic docs how a project is built (folder structure).

Sass is a supercharged version of CSS, all compiled with operations (like adding CSS rules with a plus sign, or using operators with CSS rules). But you don’t need to know Sass to use and modify stylesheet in Ionic, it’s just the files are called like in sass, with the file extension .scss. Simple and classic css works in that files too.

Hope it helps,

[rapropos]

@anna_liebt

I have a www/lib folder. I have made this by advice, that is better, that scripts, that are not installed by npm or bower, will be placed there

I would pretty strongly disagree with this advice, especially if you are new to the framework. It will make it tempting for you to fall back on crutches that don’t really fit nicely into the structure of an Angular app. In general, there is probably an Angular way of doing whatever it is your things in www/lib are doing that is available via npm, and it is going to make your apps seem much more natural and idiomatic if you seek them out.

Furthermore, you do not want to be putting anything under www by yourself. You don’t own that directory. It belongs to the build system, and it can and will blast away anything under there without notice.

[killerchip]

I was actually thinking about this approach that anna_liebt thought.

I want to create a component that includes an image.

The idea would be that the component’s source code be under a single directly so it can be copy/pasted to another project easily (re-usable).

Having to store the image in a different directory does not help with this…

Alternatively started to think of having images as data URL

I would appreciate if someone has a better solution and share it.

Regards
Costas

[imaatLuciano]

Once again, I’d like to read a suggestion from you. I’m trying to do the same as @anna_liebt. I built a custom component (it lives in src/components/inline-spinner/). Since it’s an image preloader, I’d like to distribute it with a fallback error image. Of course I can access the entire src/assets directory, but the idea is to encapsulate everything inside this component. I’ve tried to access components/inline-spinner/my-image.svg but it looks like Ionic/Angular only is allowing me to access URLs/URIs starting only with assets, like assets/img/other.svg.

What am I missing here? I would appreciate any advice here. Thank you.

PS: I think an approach would be to insert an inline image directly in .ts/.html file, like: img.src = 'data:image/svg+xml;base64...' but I don’t like this and it’s like a dirty way of doing it.