riron / ionic-img-viewer Goto Github PK
View Code? Open in Web Editor NEWIonic 2+ component providing a Twitter inspired experience to visualize pictures.
License: MIT License
Ionic 2+ component providing a Twitter inspired experience to visualize pictures.
License: MIT License
Sofware version:
I can't make this plugin work. Touch the image and nothing happen.
I'm using it like this:
.ts
import { IonicImageViewerModule } from 'ionic-img-viewer';
@NgModule({
imports: [
IonicImageViewerModule
]
})
.html
<ion-header id="header-controls"><ion-navbar> <ion-title>
<span>{{device.name}}</span>
</ion-title> </ion-navbar></ion-header>
<ion-content class="card-background-page" id="content-page">
<img [src]="'https://url-image.jpg'" imageViewer />
</ion-content>
*It's kind of confusing that the plunker demo you provide and the instructions are different, using IonicImageViewerModule and ImageViewerDirective to be imported.
Thank you!
When I tap on a image it now throws this.plt.registerListener is not a function
Ionic Framework: 2.0.0
Ionic Native: 2.2.11
Ionic App Scripts: 1.0.0
Angular Core: 2.2.1
Angular Compiler CLI: 2.2.1
Node: 6.9.1
Seems like 1.2.1 fixed this. I didn't see the changelog updated so I had to go look. LOL Thanks as always for your work! @Riron
Production build fails with error below :
[19:48:09] ngc started ...
[19:48:34] ionic-app-script task: "build"
[19:48:34] Error: Error encountered resolving symbol values statically. Calling function 'makeDecorator', function
calls are not supported. Consider replacing the function or lambda with a reference to an exported function,
resolving symbol NgModule in
C:/xampp/htdocs/ionic2/ionicProject/node_modules/ionic-img-viewer/node_modules/@angular/core/src/me
tadata/ng_module.d.ts,
Dependencies :-
"dependencies": {
"@angular/common": "2.4.8",
"@angular/compiler": "2.4.8",
"@angular/compiler-cli": "2.4.8",
"@angular/core": "2.4.8",
"@angular/forms": "2.4.8",
"@angular/http": "2.4.8",
"@angular/platform-browser": "2.4.8",
"@angular/platform-browser-dynamic": "2.4.8",
"@angular/platform-server": "2.4.8",
"@ionic/storage": "2.0.0",
"ionic-angular": "^2.3.0",
"ionic-image-loader": "^1.3.0",
"ionic-img-viewer": "^1.3.2",
"ionic-native": "^2.5.1",
"ionicons": "3.0.0",
"ng2-img-fallback": "^0.2.1",
"rxjs": "5.0.1",
"sw-toolbox": "3.4.0",
"zone.js": "0.7.2"
},
"devDependencies": {
"@ionic/app-scripts": "^1.1.4",
"typescript": "2.0.9"
},
Thanks !
Could you, please, add a license?
Hi there,
It looks great, and I really want to use it.
Unfortunatly, when I import it, my app do not like it at all:
main.js:28334Uncaught Error: Unexpected value 'IonicImageViewerModule' imported by the module 'AppModule'(โฆ)
Your system information:
Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.1
Ionic CLI Version: 2.1.8
Ionic App Lib Version: 2.1.4
Ionic App Scripts Version: 0.0.37-5
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.4
Node Version: v7.2.0
Xcode version: Not installed
I hope you can help me !
Cheers
In android does not work the hardware back button and to zoom you have to press the image 4 times.
Hi, what a great plugin! The feel of user viewing the images is just stunning!
I was wondering maybe we can improve it adding support for sliders, if the user swipes left/right then show another image, what do you think? Is that possible?
node_modules/ionic-img-viewer/dist/src/image-viewer-transition-gesture.d.ts
export declare class ImageViewerTransitionGesture extends PanGesture {
private component;
}
ionic2 v: 2.2.1
Thank you so much.
On double tap the image zoom however it only Scrolls vertically and not horizontal. I am using Android 7, node 7.2 and version 1.1.5.
When I installed the new version of Ionic Framework it gave me a UNMET PEER DEPENDENCY [email protected]
because you have it at 3.1.0.
Thanks for the module. nice one.
Only one issue , on clicking image it passes the event to list item and app navigates. event should be prevented.
As already discussed here #9, this issue still is present when using --prod. With --dev it works, but it should also work with --prod.
Error:
Unexpected value 'IonicImageViewerModule' in path/node_modules/ionic-img-viewer/dist/src/module.d.ts imported by the module 'AppModule'
Setup Info:
Cordova CLI: 6.5.0
Ionic Framework Version: 3.1.1
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.4
ios-deploy version: 1.9.1
ios-sim version: 5.0.13
OS: OS X El Capitan
Node Version: v7.7.3
Xcode version: Xcode 8.2.1 Build version 8C1002
First of all thanks for the great component!
Just wanted to mention that the styles (.css neither .scss) are included in the package.
Have I missed something or this is a "bug"?
Version 1.1.7
Everything is working OK when I integrated the scss from the src folder
Hi
I follow the installation instruction and I got this error when trying to import it can you help to solve this issue.
my project is ionic 2, the import statement is
import { IonicImageViewerModule } from 'ionic-img-viewer';
the Error that I got.
Typescript Error
Type 'any' is not a constructor function type.
node_modules/ionic-img-viewer/dist/src/image-viewer-transition-gesture.d.ts
import { DomController } from 'ionic-angular';
export declare class ImageViewerTransitionGesture extends PanGesture {
private component;
This feature: Double tap on the pic when open to zoom Not worked! Fix it
Hi guys,
Installation shows the following warnings:
npm install --save ionic-img-viewer ionic-hello-world@ C:\projects\ionic\flannery +-- UNMET PEER DEPENDENCY [email protected]
-- [email protected]
npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]
npm WARN [email protected] requires a peer of ionic-angular@~3.1.0 but none was installed.`
When I run my app I receive this error:
Typescript Error
Type 'any' is not a constructor function type.
...nery/node_modules/ionic-img-viewer/dist/src/image-viewer-transition-gesture.d.ts
import { DomController } from 'ionic-angular';
export declare class ImageViewerTransitionGesture extends PanGesture {
private component;
Could you please help me?
Thanks
Hi guys, i have a little problem, its that i have been testing the plugin with Android 4.4 version and the double tap in the image to open the zoom doesn't works, but with the 6.0 android version it works ok.
Is it possible to handle the android back button? The idea is to keep the same behavior as the top left arrow.
Thanks for this great plugin!
I assume latest version(1.2.1) is not compatible with Ionic 2.0.0 and later, please correct me if I am wrong.
So any plan to make it compatible (any time soon)?
Thank you for the great component by the way! ๐
p.s. According to README file we need to add ImageViewerDirective
to @Component
with directives
attribute, but there is no directives
attribute in @Component
any more, is there any other way to use current directive? (in ionic 2.0.0)
Hi, i have this issue
error_handler.js:47 EXCEPTION: ele.addEventListener is not a function
ErrorHandler.handleError @ error_handler.js:47
IonicErrorHandler.handleError @ ionic-error-handler.js:56
next @ application_ref.js:272
schedulerFn @ async.js:82
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:74
NgZone.triggerError @ ng_zone.js:278
onHandleError @ ng_zone.js:257
t.handleError @ polyfills.js:3
e.runTask @ polyfills.js:3
invoke @ polyfills.js:3
error_handler.js:52 ORIGINAL STACKTRACE:
ErrorHandler.handleError @ error_handler.js:52
IonicErrorHandler.handleError @ ionic-error-handler.js:56
next @ application_ref.js:272
schedulerFn @ async.js:82
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:74
NgZone.triggerError @ ng_zone.js:278
onHandleError @ ng_zone.js:257
t.handleError @ polyfills.js:3
e.runTask @ polyfills.js:3
invoke @ polyfills.js:3
error_handler.js:53 TypeError: ele.addEventListener is not a function
at listenEvent (ui-event-manager.js:196)
at new PointerEvents (ui-event-manager.js:48)
at UIEventManager.pointerEvents (ui-event-manager.js:163)
at ImageViewerGesture.PanGesture.listen (drag-gesture.js:46)
at new ImageViewerGesture (image-viewer-gesture.js:27)
at image-viewer.component.js:32
at t.invoke (polyfills.js:3)
at e.run (polyfills.js:3)
at NgZone.runOutsideAngular (ng_zone.js:144)
at ImageViewerComponent.ngOnInit (image-viewer.component.js:32)
when i try to build in production mode a get this error:
> ionic build android --prod
ionic-app-scripts build "--prod"
[22:22:55] ionic-app-scripts 1.1.3
[22:22:55] build prod started ...
[22:22:55] clean started ...
[22:22:55] clean finished in 2 ms
[22:22:55] copy started ...
[22:22:55] ngc started ...
can't resolve module /Users/user/Develop/vvCremaIonic/ionic2/vvApp/node_modules/ionic-img-viewer/node_modules/@angular/core/src/di/reflective_key.d.ts from /Users/user/Develop/vvCremaIonic/ionic2/vvApp/node_modules/ionic-img-viewer/node_modules/@angular/core/src/di/reflective_key.d.ts
[22:22:59] build prod failed: can't find symbol KeyRegistry exported from module
/Users/user/Develop/vvCremaIonic/ionic2/vvApp/node_modules/ionic-img-viewer/node_modules/@angular/core/src/di/reflective_key.d.ts
[22:22:59] ionic-app-script task: "build"
[22:22:59] Error: can't find symbol KeyRegistry exported from module
/Users/user/Develop/vvCremaIonic/ionic2/vvApp/node_modules/ionic-img-viewer/node_modules/@angular/core/src/di/reflective_key.d.ts
Error: can't find symbol KeyRegistry exported from module /Users/user/Develop/vvCremaIonic/ionic2/vvApp/node_modules/ionic-img-viewer/node_modules/@angular/core/src/di/reflective_key.d.ts
at ReflectorHost.findDeclaration (/Users/user/Develop/vvCremaIonic/ionic2/vvApp/node_modules/@angular/compiler-cli/src/reflector_host.js:173:23)
at /Users/user/Develop/vvCremaIonic/ionic2/vvApp/node_modules/@angular/compiler-cli/src/codegen.js:137:46
at Array.forEach (native)
at extractProgramSymbols (/Users/user/Develop/vvCremaIonic/ionic2/vvApp/node_modules/@angular/compiler-cli/src/codegen.js:120:10)
at CodeGenerator.codegen (/Users/user/Develop/vvCremaIonic/ionic2/vvApp/node_modules/@angular/compiler-cli/src/codegen.js:57:29)
at Object.runCodegen (/Users/user/Develop/vvCremaIonic/ionic2/vvApp/node_modules/@ionic/app-scripts/dist/aot/codegen/codegen-ng22.js:15:26)
at Object.doCodegen (/Users/user/Develop/vvCremaIonic/ionic2/vvApp/node_modules/@ionic/app-scripts/dist/aot/codegen.js:6:31)
at /Users/user/Develop/vvCremaIonic/ionic2/vvApp/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:41:30
npm ERR! Darwin 16.4.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "ionic:build" "--" "--prod"
npm ERR! node v7.7.1
npm ERR! npm v4.3.0
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vvapp@ ionic:build: ionic-app-scripts build "--prod"
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vvapp@ ionic:build script 'ionic-app-scripts build "--prod"'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the vvapp package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! ionic-app-scripts build "--prod"
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs vvapp
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls vvapp
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /Users/user/.npm/_logs/2017-03-23T21_22_59_438Z-debug.log
Hi, great plugin !
I think there is an issue on tap to zoom on Android.
I have to tap 3 times to actually zoom the image.
Any idea ?
Thanks
When I click on a image I get Error in :0:0 caused by: this.plt.registerListener is not a function
this started happening when upgrading to RC 4.
Ionic Framework: ^2.0.0-rc.4
Ionic Native: 2.2.11
Ionic App Scripts: 0.0.47
Angular Core: 2.2.1
Angular Compiler CLI: 2.2.1
Node: 6.9.1
When I run ionic build --prod
or ionic build --aot
it throws Error: No provider for Config!
.
This is the line that it's referring to import * as import129 from 'ionic-img-viewer/node_modules/ionic-angular/config/config';
import128.registerCustomTransitions(this.parent.get(import129.Config)),
Cordova CLI: 6.5.0
Ionic Framework Version: 2.0.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.4
i can't resolve the error. i need you help me~~
My system information:
Cordova CLI: 6.5.0
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: 1.9.1
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v7.7.1
Xcode version: Xcode 8.2.1 Build version 8C1002
Error message:
TypeError: ele.addEventListener is not a function
at listenEvent (ui-event-manager.js:196)
at new PointerEvents (ui-event-manager.js:48)
at UIEventManager.pointerEvents (ui-event-manager.js:163)
at ImageViewerTransitionGesture.PanGesture.listen (drag-gesture.js:46)
at new ImageViewerTransitionGesture (image-viewer-transition-gesture.js:28)
at image-viewer.component.js:28
at t.invoke (polyfills.js:3)
at e.run (polyfills.js:3)
at NgZone.runOutsideAngular (ng_zone.js:144)
at ImageViewerComponent.ngOnInit (image-viewer.component.js:28)
waiting for you~ thank you~
How to use this directive. Added in declarations: [...] but not ale ti get on respective page ?
If you have any demo code or suggestion . Please share.
I have read readme.log but plugin not work with ionic2 rc.1. Help me please
Module is not working with latest ionic rc5 version.
Hi,
when I try to import imageViewerDirective in the component I am getting "has no exported member 'ImageViewerDirective"
any idea what am i doing wrong ?
Hi!
I see in the html that things are happening when I tap an image, but its not showing. Something wrong with my css?
Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: 1.9.1
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v6.9.2
Xcode version: Xcode 8.3.1 Build version 8E1000a
When I use ionic build android
or ionic build ios
the error for Module ''*'' has no exported member 'Wrapper_ImageViewerDirective'.
comes up.
I looked at this issue #17 & it doesn't seem to be my error.
ionic-img-viewer: v1.1.5
Ionic Framework Version: 2.0.0-rc.3
Can't build in production mode, Any idea ?:
Log :
`[10:47:39] ionic-app-scripts 1.1.4
[10:47:39] build prod started ...
[10:47:39] clean started ...
[10:47:39] clean finished in 2 ms
[10:47:39] copy started ...
[10:47:39] ngc started ...
[10:47:41] build prod failed: Error encountered resolving symbol values statically. Calling function 'makeDecorator',
function calls are not supported. Consider replacing the function or lambda with a reference to an exported
function, resolving symbol NgModule in
/Users/Adil/IdeaProjects/aliae/node_modules/ionic-img-viewer/node_modules/@angular/core/src/metadata/ng_module.d.ts,
resolving symbol NgModule in
/Users/Adil/IdeaProjects/aliae/node_modules/ionic-img-viewer/node_modules/@angular/core/src/metadata.d.ts,
resolving symbol NgModule in
/Users/Adil/IdeaProjects/aliae/node_modules/ionic-img-viewer/node_modules/@angular/core/src/core.d.ts,
resolving symbol NgModule in
/Users/Adil/IdeaProjects/aliae/node_modules/ionic-img-viewer/node_modules/@angular/core/index.d.ts,
resolving symbol IonicImageViewerModule in
/Users/Adil/IdeaProjects/aliae/node_modules/ionic-img-viewer/dist/src/module.d.ts, resolving symbol
IonicImageViewerModule in /Users/Adil/IdeaProjects/aliae/node_modules/ionic-img-viewer/dist/src/module.d.ts
[10:47:41] ionic-app-script task: "build"
[10:47:41] Error: Error encountered resolving symbol values statically. Calling function 'makeDecorator', function
calls are not supported. Consider replacing the function or lambda with a reference to an exported function,
resolving symbol NgModule in
/Users/Adil/IdeaProjects/aliae/node_modules/ionic-img-viewer/node_modules/@angular/core/src/metadata/ng_module.d.ts,
resolving symbol NgModule in
/Users/Adil/IdeaProjects/aliae/node_modules/ionic-img-viewer/node_modules/@angular/core/src/metadata.d.ts,
resolving symbol NgModule in
/Users/Adil/IdeaProjects/aliae/node_modules/ionic-img-viewer/node_modules/@angular/core/src/core.d.ts,
resolving symbol NgModule in
/Users/Adil/IdeaProjects/aliae/node_modules/ionic-img-viewer/node_modules/@angular/core/index.d.ts,
resolving symbol IonicImageViewerModule in
/Users/Adil/IdeaProjects/aliae/node_modules/ionic-img-viewer/dist/src/module.d.ts, resolving symbol
IonicImageViewerModule in /Users/Adil/IdeaProjects/aliae/node_modules/ionic-img-viewer/dist/src/module.d.ts
Error: Error encountered resolving symbol values statically. Calling function 'makeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol NgModule in /Users/Adil/IdeaProjects/aliae/node_modules/ionic-img-viewer/node_modules/@angular/core/src/metadata/ng_module.d.ts, resolving symbol NgModule in /Users/Adil/IdeaProjects/aliae/node_modules/ionic-img-viewer/node_modules/@angular/core/src/metadata.d.ts, resolving symbol NgModule in /Users/Adil/IdeaProjects/aliae/node_modules/ionic-img-viewer/node_modules/@angular/core/src/core.d.ts, resolving symbol NgModule in /Users/Adil/IdeaProjects/aliae/node_modules/ionic-img-viewer/node_modules/@angular/core/index.d.ts, resolving symbol IonicImageViewerModule in /Users/Adil/IdeaProjects/aliae/node_modules/ionic-img-viewer/dist/src/module.d.ts, resolving symbol IonicImageViewerModule in /Users/Adil/IdeaProjects/aliae/node_modules/ionic-img-viewer/dist/src/module.d.ts
at SyntaxError.BaseError [as constructor] (/Users/Adil/IdeaProjects/aliae/node_modules/@angular/compiler/bundles/compiler.umd.js:1597:31)
at new SyntaxError (/Users/Adil/IdeaProjects/aliae/node_modules/@angular/compiler/bundles/compiler.umd.js:1795:20)
at simplifyInContext (/Users/Adil/IdeaProjects/aliae/node_modules/@angular/compiler/bundles/compiler.umd.js:25783:27)
at StaticReflector.simplify (/Users/Adil/IdeaProjects/aliae/node_modules/@angular/compiler/bundles/compiler.umd.js:25795:17)
at StaticReflector.annotations (/Users/Adil/IdeaProjects/aliae/node_modules/@angular/compiler/bundles/compiler.umd.js:25291:64)
at NgModuleResolver.resolve (/Users/Adil/IdeaProjects/aliae/node_modules/@angular/compiler/bundles/compiler.umd.js:17771:86)
at CompileMetadataResolver.getNgModuleMetadata (/Users/Adil/IdeaProjects/aliae/node_modules/@angular/compiler/bundles/compiler.umd.js:18272:64)
at addNgModule (/Users/Adil/IdeaProjects/aliae/node_modules/@angular/compiler/bundles/compiler.umd.js:25053:62)
at /Users/Adil/IdeaProjects/aliae/node_modules/@angular/compiler/bundles/compiler.umd.js:25064:18
at Array.forEach (native)
npm ERR! Darwin 16.4.0
npm ERR! argv "/usr/local/Cellar/node/6.7.0/bin/node" "/Users/Adil/.npm-packages/bin/npm" "run" "ionic:build" "--" "--prod"
npm ERR! node v6.7.0
npm ERR! npm v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! aliae@ ionic:build: ionic-app-scripts build "--prod"
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the aliae@ ionic:build script 'ionic-app-scripts build "--prod"'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the aliae package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! ionic-app-scripts build "--prod"
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs aliae
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls aliae
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /Users/Adil/IdeaProjects/aliae/npm-debug.log`
Dependencies :
"dependencies": {
"@angular/common": "2.4.8",
"@angular/compiler": "2.4.8",
"@angular/compiler-cli": "2.4.8",
"@angular/core": "2.4.8",
"@angular/forms": "2.4.8",
"@angular/http": "2.4.8",
"@angular/platform-browser": "2.4.8",
"@angular/platform-browser-dynamic": "2.4.8",
"@angular/platform-server": "2.4.8",
"ionic-angular": "2.3.0",
"@ionic-native/core": "3.1.1",
"@ionic-native/status-bar": "3.1.1",
"@ionic-native/splash-screen": "3.1.1",
"@ionic-native/network": "3.1.1",
"@ionic-native/keyboard": "3.1.1",
"@ionic-native/push": "3.1.1",
"@ionic/storage": "2.0.0",
"ionicons": "3.0.0",
"ionic-img-viewer": "1.1.8",
"rxjs": "5.0.1",
"zone.js": "0.7.2",
"sw-toolbox": "3.4.0"
},
"devDependencies": {
"@ionic/app-scripts": "1.1.4",
"typescript": "2.0.9"
}
Running [email protected]
[email protected]
(works with [email protected])
ionic build
- works
ionic build --prod
- works up until uglifyjs finished in 21.99 s
- then silently hangs up
Hi! Thanks for your contribution on the plugin. I am using Ionic2(not the beta one) and when I wanna import your ionic-ing-viewer to my NgModule, there exists an error:
ngc error: Error: Unexpected value 'IonicImageViewerModule' imported by the module 'AppModule'
Does anyone have any idea how it comes?
Thanks in advance!
I can get the imageViewer to work in a .html file of an Ionic 2 app I'm building, but it is not working in a .ts file that I'm writing a google map info window in. No errors appear. When I click the image just nothing happens.
let ContentPlace = `<img height="125" width="125" src=${this.a} imageViewer />`;
var infoWindow = new google.maps.InfoWindow({
content: " "
});
google.maps.event.addListener(marker2, 'click', () => {
infoWindow.close();
infoWindow.setContent(ContentPlace);
infoWindow.open(this.map, marker2);
});
});
this.a
is a base64 image. I have tried wrapping it in quotation marks like so: "${this.a}"
, but nothing.
Am I doing something wrong, or is this a limitation of ionic-img-viewer?
face issue in build prod mode.
ionic2: v2.2.1
ionic-img-viewer: v2.1.0
[13:09:01] typescript: node_modules/ionic-img-viewer/dist/src/image-viewer-transition-gesture.d.ts, line: 6
Type 'any' is not a constructor function type.
L5: import { DomController } from 'ionic-angular';
L6: export declare class ImageViewerTransitionGesture extends PanGesture {
L7: private component;
[13:09:01] ngc failed: Failed to transpile TypeScript
[13:09:01] ionic-app-script task: "build"
[13:09:01] Error: Failed to transpile TypeScript
Error: Failed to transpile TypeScript
at /home/erp/Mobile_app/ionic-sales-app/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:70:47
Can we give external dimension and close button instead of back button in image viewer screen?
Double click to zoom causes:
(index):28 Uncaught TypeError: Cannot read property 'cancel' of undefined http://localhost:1024/build/polyfills.js Line: 3
console.(anonymous function) @ (index):28
window.onerror @ (index):12
polyfills.js:3 Uncaught TypeError: Cannot read property 'cancel' of undefined
at ImageViewerGesture.PanGesture.pointerUp (drag-gesture.js:115)
at PointerEvents.handleTouchEnd (ui-event-manager.js:89)
at t.invokeTask (polyfills.js:3)
at e.runTask (polyfills.js:3)
at HTMLElement.invoke (polyfills.js:3)
When tried to cancel with swipe event the app freezes I got in addition:
Uncaught TypeError: Cannot read property 'write' of undefined http://localhost:1024/build/polyfills.js Line: 3
console.(anonymous function) @ (index):28
window.onerror @ (index):12
polyfills.js:3 Uncaught TypeError: Cannot read property 'write' of undefined
at ImageViewerGesture.PanGesture.pointerMove (drag-gesture.js:98)
at t.invokeTask (polyfills.js:3)
at e.runTask (polyfills.js:3)
at HTMLElement.invoke (polyfills.js:3)
Ionic 2 RC4
Running 1.2.2 works fine on ionic 2.1.0, however after upgrading to ionic 2.2.0 (which has a newer angular 2 version):
ionic build
works fine
ionic build --prod
generates this error:
ionic-app-scripts 1.1.4
build prod started ...
clean started ...
clean finished in 4 ms
copy started ...
ngc started ...
build prod failed: Error encountered resolving symbol values statically. Calling function 'makeDecorator',
function calls are not supported. Consider replacing the function or lambda with a reference to an exported
function, resolving symbol NgModule in /node_modules/ionic-img-viewer/node_modules/@angular/core/src/metadata/ng_module.d.ts
...
ionic build
[13:21:02] transpile started ...
[13:21:05] typescript: node_modules/ionic-img-viewer/dist/src/image-viewer-transition-gesture.d.ts, line: 6
Type 'any' is not a constructor function type.
L5: import { DomController } from 'ionic-angular';
L6: export declare class ImageViewerTransitionGesture extends PanGesture {
L7: private component;
Hi,
image I am using sanitizer.bypassSecurityTrustUrl(sale.img) and it works fine
but when I add imageViewer directive it open new with broken image
and error says WARNING: sanitizing unsafe URL value data:image/jpeg
Getting this issue on Ionic RC3
Property 'create' does not exist on type 'GestureController'.
Problem is that they have changed the way the GestureController works.
I'll try to submit a Pull Request here.
I encounter this bug with the build command ionic build android --prod
.
ionic2: v2.2.1
ionic-img-viewer: v1.3.2
[10:53:22] build prod failed: can't find symbol KeyRegistry exported from module
/private/var/www/experiment/MotionscloudWebrtc/node_modules/ionic-img-viewer/node_modules/@angular/core/src/di/reflective_key.d.ts
[10:53:22] ionic-app-script task: "build"
[10:53:22] Error: can't find symbol KeyRegistry exported from module
/private/var/www/experiment/MotionscloudWebrtc/node_modules/ionic-img-viewer/node_modules/@angular/core/src/di/reflective_key.d.ts
Error: can't find symbol KeyRegistry exported from module /private/var/www/experiment/MotionscloudWebrtc/node_modules/ionic-img-viewer/node_modules/@angular/core/src/di/reflective_key.d.ts
I was wondering if this would be possible or if you have thought about it? Some of my users are thrown off to the fact of having to double tap the image.
I am loading html content from the server and displaying it in an ionic app. It would be great to be able to use this plugin to add imageViewer support for these dynamically loaded img tags. I tried to manually add click handlers to these images and using ImageViewer.create (copying code from your directive) but it appears that your module is not exporting the ImageViewer class.
Not totally familiar with the internals of modules in ng2 so not sure whether adding this to the exports would do the trick. Anyways, would be nice to have, in the meantime I'm hacking something together.
Update: can confirm that if I add ImageViewer to the generated exports from your module then dynamic images are supported.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.