Skip to content
This repository has been archived by the owner on Nov 17, 2022. It is now read-only.

docs: Updated images.md to describe how to include local images to your build. #1915

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

docs: Updated images.md to describe how to include local images to your build. #1915

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
43c8314
Update images.md
martijnvanschie Sep 10, 2020
5dede6e
docs: Fixed a typo
martijnvanschie Sep 10, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions docs/ui/images.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,24 @@ Using the `~/` prefix, you can load images relative to the `App` folder inside y
```
{% endangular %}

The actual mapping between the `~/` to this `app` folder is configured in the `tsconfig.json` file under the `compilerOptions` property.

```yaml
"paths": {
"~/*": [
"app/*"
]
```

For images to be available in the app they need to be included in the build process. To include the files make sure they are copied during the build. This is done by adding a additional target to the `copyTargets` in the `webpack.config.js`.

```JavaScript
const copyTargets = [
...
{ from: 'images/**', noErrorOnMissing: false, globOptions: { dot: false, ...copyIgnore } },
];
```

You can manually create an [ImageSource instance from local file]({%ns_cookbook image-source#load-image-from-a-local-file%}).

> Currently, loading images from the file system does not respect filename qualifiers as described [here]({% slug architecture %}#supporting-multiple-screens). We have plans to implement that along with [density-specific qualifiers support](https://github.com/NativeScript/NativeScript/issues/276).
Expand Down