Skip to content

Commit dd00f61

Browse files
committed
fix(): Misc image file paths
1 parent 0a327ab commit dd00f61

File tree

4 files changed

+176
-312
lines changed

4 files changed

+176
-312
lines changed

docs/core-concepts/cross-platform.md

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,6 @@ This bit of code can be incredibly helpful when targeting environments where acc
3737

3838
Many native APIs that people use (for example, the File API), are not available in the browser. The APIs are always improving and catching up to native, so it is recommended to research them. Taking the first two points into consideration, it's fairly easy to create a nice experience that will adapt for the platform the app is running on.
3939

40-
4140
## Desktop
4241

4342
When planning to deploy an app to desktop, either using <a href="https://electronjs.org" target="_blank">Electron</a> or as a <strong>Progressive Web App</strong>, it is important to ensure the app works smoothly on larger devices.
@@ -68,7 +67,7 @@ Many people rarely notice the layout of an app, but it can have a massive impact
6867

6968
This will render 5 items with a width of 100% each. This may look great on a mobile device, as seen below, but viewing this on a desktop browser is a different story. The items become stretched to fill the entire screen because of the wide screen width, leaving screen space unused.
7069

71-
<img src="/img/building/cross-platform-items.png"/>
70+
<img src="/docs/img/building/cross-platform-items.png"/>
7271

7372
To improve this experience, we can wrap the items in a [Grid](/docs/layout/grid) component. The view can be easily rewritten into something more usable on larger screens:
7473

@@ -106,11 +105,11 @@ To improve this experience, we can wrap the items in a [Grid](/docs/layout/grid)
106105

107106
By wrapping the items in an `ion-grid` element, the Ionic grid system is added to our layout. Wrapping each item in a column makes the items take up equal-width inside of the grid, along the same row.
108107

109-
<img src="/img/building/cross-platform-grid.png"/>
108+
<img src="/docs/img/building/cross-platform-grid.png"/>
110109

111110
We can take this even further by adding the `fixed` attribute to the `<ion-grid>` element. This tells the grid to have a fixed width based on the screen size. This is perfect for larger screens when items will begin to stretch again without a width on the grid.
112111

113-
<img src="/img/building/cross-platform-grid-fixed.png"/>
112+
<img src="/docs/img/building/cross-platform-grid-fixed.png"/>
114113

115114
The grid can be further customized to change the sizes of columns with the addition of the `ion-col` properties.
116115

docs/developer-resources/guides/first-app-v3/ios-android-camera.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@
55

66
Previously, we got an Ionic app up and running locally in a web browser. Now, let’s get it onto your iOS or Android device, then start building the photo gallery feature. Fortunately, Ionic provides a way to skip the frustration of dealing with native SDK installations: Ionic DevApp!
77

8-
The Ionic DevApp is a free app that makes it easy to run your Ionic app directly on your iOS or Android device. Download it here, then open on your device:
8+
The Ionic DevApp is a free app that makes it easy to run your Ionic app directly on your iOS or Android device. Download it here, then open on your device:
99

10-
<a href="https://itunes.apple.com/us/app/ionic-devapp/id1233447133?ls=1&mt=8" ><img src="/img/guides/first-app-v3/appstore.png" /></a>
11-
<a href="https://play.google.com/store/apps/details?id=io.ionic.devapp&hl=en" ><img src="/img/guides/first-app-v3/playstore.png" /></a>
10+
<a href="https://itunes.apple.com/us/app/ionic-devapp/id1233447133?ls=1&mt=8" ><img src="/docs/img/guides/first-app-v3/appstore.png" /></a>
11+
<a href="https://play.google.com/store/apps/details?id=io.ionic.devapp&hl=en" ><img src="/docs/img/guides/first-app-v3/playstore.png" /></a>
1212

1313
Afterwards, open a terminal and navigate to your Ionic project. Execute the following:
1414

@@ -24,9 +24,9 @@ Back in `about.html`, add the following:
2424

2525
```html
2626
<ion-content>
27-
<img>
27+
<img />
2828

29-
<ion-fab center bottom>
29+
<ion-fab center bottom>
3030
<button ion-fab>
3131
<ion-icon name="camera"></ion-icon>
3232
</button>
@@ -38,7 +38,7 @@ Save the file and watch - a camera button appears! Tap on it and notice that it
3838

3939
## Add the Camera Dependencies via the CLI
4040

41-
In order to use the Camera, we need to bring in its JavaScript and native library dependencies. Back over in your Terminal window, run the following command, which adds the JavaScript library to the project, thus exposing the Camera API in TypeScript code:
41+
In order to use the Camera, we need to bring in its JavaScript and native library dependencies. Back over in your Terminal window, run the following command, which adds the JavaScript library to the project, thus exposing the Camera API in TypeScript code:
4242

4343
```shell
4444
$ npm install --save @ionic-native/camera
@@ -95,13 +95,13 @@ It can now be used on any of our App pages.
9595
Our camera button doesn’t do anything yet. Over in `about.html`, add a click handler to the button:
9696

9797
```html
98-
<button ion-fab (click)="takePicture()">
98+
<button ion-fab (click)="takePicture()"></button>
9999
```
100100

101101
Then, update the image placeholder. The following binds the “currentImage” variable (which we’ll work on next) to the image to display to the user.
102102

103103
```html
104-
<img [src]="currentImage" *ngIf="currentImage">
104+
<img [src]="currentImage" *ngIf="currentImage" />
105105
```
106106

107107
Open `about.ts` next and import the Camera library:
@@ -130,7 +130,7 @@ takePicture() {
130130
encodingType: this.camera.EncodingType.JPEG,
131131
mediaType: this.camera.MediaType.PICTURE
132132
}
133-
133+
134134
this.camera.getPicture(options).then((imageData) => {
135135
this.currentImage = 'data:image/jpeg;base64,' + imageData;
136136
}, (err) => {

0 commit comments

Comments
 (0)