Jak powiększyć obrazek w aplikacji ionic? Można to zrobić szybko i bezproblemowo, ponieważ rozwiązanie podsuwa sam zespół Ionica.
Instalacja wymaganych wtyczek\r\n\r\nNależy przejść do katalogu naszej aplikacji. Nie obejdzie się bez instalacji wtyczek, poniżej dwie komendy które trzeba wykonać:\r\n\r\nbash\r\nionic cordova plugin add com-sarriaroman-photoviewer\r\nnpm install --save @ionic-native/photo-viewer\r\n\r\n\r\nNastępnie należy pobraną wtyczkę PhotoViewer zaimportować w src/app/app.module.ts. Na samej górze wklejamy:\r\n\r\njs\r\nimport { PhotoViewer } from @ionic-native/photoviewer;\r\n\r\n\r\nA w części "providers" dodajemy PhotoViewer.\r\n\r\n## Użytkowanie\r\n\r\nWybieramy stronę na której chcemy użyć wtyczki. W jej pliku TypeScriptowym (.TS) na samej górze importujemy PhotoViewer:\r\n\r\njs\r\nimport { PhotoViewer } from @ionic-native/photoviewer;\r\n\r\n\r\nW konstruktorze dodajemy pozycję:\r\n\r\njs\r\nconstructor(public photoViewer: PhotoViewer) { }\r\n\r\n\r\nTeraz już możemy zabrać się do użytkowania wtyczki. Można to zrobić na dwa sposoby - albo wywołujemy wtyczkę bezpośrednio z obrazka, albo definiujemy nową funkcję w TS. Oba rozwiązania prezentuję poniżej.\r\n\r\n## Sposób 1 - Bezpośrednio z obrazka\r\n\r\nhtml\r\n<img src="http://serwer.pl/obrazek.jpg" (click)="this.photoViewer.show(http://serwer.pl/duzy-obrazek.jpg, Mój obrazek, {share: false})">\r\n\r\n\r\n## Sposób 2 - Poprzez dodatkową funkcję\r\n\r\njs\r\n<img src="http://serwer.pl/obrazek.jpg" (click)="showImage(http://serwer.pl/duzy-obrazek.jpg)">\r\n\r\n\r\nA następnie należy dodać funkcję do pliku TS:\r\n\r\njs\r\npublic showImage (url: any) {\r\nthis.photoViewer.show(url, Mój obrazek, {share: false});\r\n}\r\n
Szukasz hostingu?
Jest dużo firm oferujących hosting, ale którą wybrać? Przedstawiamy zestawienie najciekawszych propozycji i ranking hostingów (Wrzesień 2024).