Ionic - img tag makes app crash


#1

I created totally new app using Ionic CLI.
Need to have a fragment of windows where I can show stream of MJPEG. I found that img or ion-img can do it.
In home.html I put

<img src= width=320 height=240>

or
<ion-img src= width=320 height=240>.

And both ways make app crash (tested on android device).

Below there is debug from Android Studio.

                                                 *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** ***
                                                 Build fingerprint: 'samsung/matissevewifixx/matissevewifi:5.1.1/LMY47X/T533XXS1BPL2:user/release-keys'
                                                 Revision: '2'
                                                 ABI: 'arm'
                                                 pid: 13169, tid: 13211, name: Chrome_InProcRe  >>> io.ionic.starter <<<
                                                 signal 7 (SIGBUS), code -6 (SI_TKILL), fault addr 0xa64e1f58
                                                     r0 41382e98  r1 00000004  r2 00000001  r3 00000001
                                                     r4 41382e98  r5 00000001  r6 a0902120  r7 00000000
                                                     r8 a6e4f508  r9 a090217c  sl 00000001  fp 00000000
                                                     ip a49933a5  sp a09020e0  lr a64e2c93  pc a64e1f58  cpsr 60070030
                                                     d0  687a8fd471421bd9  d1  a02b7b579107a3d8
                                                     d2  d53cd99d505171ff  d3  43ebc95584a641d9
                                                     d4  175004b8710f5a0a  d5  623c07428036948e
                                                     d6  510900f4503bc89a  d7  022b29353840ce95
                                                     d8  40b0f69989ce4a7b  d9  0000000000000000
                                                     d10 0000000000000000  d11 0000000000000000
                                                     d12 0000000000000000  d13 0000000000000000
                                                     d14 0000000000000000  d15 0000000000000000
                                                     d16 c3e0000000000000  d17 41f02d6d04f00000
                                                     d18 0000000102d6c5be  d19 4260000000000000
                                                     d20 4274000044a00000  d21 4260000000000000
                                                     d22 bebbbbd465e1db19  d23 3fc08c5800000000
                                                     d24 3f8033567853860d  d25 3e68469d68200000
                                                     d26 bffe966e0e8739bb  d27 bc5b3d8033cd1d4e
                                                     d28 3fb6991f178c6454  d29 4000000000000000
                                                     d30 3fb6f0d28ae56b41  d31 3fb6f0d1c8b08000
                                                     scr 20000013
                                                 
                                                 backtrace:
                                                     #00 pc 01dbef58  /data/app/com.google.android.webview-2/lib/arm/libwebviewchromium.so
                                                 
                                                 stack:
                                                          a0902060  a09020ac  [stack:13211]
                                                          a0902064  a59afb13  /data/app/com.google.android.webview-2/lib/arm/libwebviewchromium.so
                                                          a0902068  45edc5c8  
                                                          a090206c  53773d60  
                                                          a0902070  00000000  
                                                          a0902074  00000000  
                                                          a0902078  00000000  
                                                          a090207c  45e5dca0  
                                                          a0902080  00000002  
                                                          a0902084  45edc5c0  
                                                          a0902088  a09020c4  [stack:13211]
                                                          a090208c  00000000  
                                                          a0902090  00000000  
                                                          a0902094  a6e4f508  /data/app/com.google.android.webview-2/lib/arm/libwebviewchromium.so
                                                          a0902098  a090217c  [stack:13211]
                                                          a090209c  a59bc6cf  /data/app/com.google.android.webview-2/lib/arm/libwebviewchromium.so
                                                          a09020a0  45e5dca0  
                                                          a09020a4  45edc5a0  
                                                          a09020a8  45edc5a0  
                                                          a09020ac  45edc5a0  
                                                          a09020b0  45edc630  
                                                          a09020b4  a09020d0  [stack:13211]
                                                          a09020b8  a0902120  [stack:13211]
                                                          a09020bc  a59a8817  /data/app/com.google.android.webview-2/lib/arm/libwebviewchromium.so
                                                          a09020c0  a59a8809  /data/app/com.google.android.webview-2/lib/arm/libwebviewchromium.so
                                                          a09020c4  41382e98  
                                                          a09020c8  00000001  
                                                          a09020cc  a64e1d3b  /data/app/com.google.android.webview-2/lib/arm/libwebviewchromium.so
                                                          a09020d0  00000280  
                                                          a09020d4  000001e0  
                                                          a09020d8  00000109  
                                                          a09020dc  a64e2c7f  /data/app/com.google.android.webview-2/lib/arm/libwebviewchromium.so
                                                     #00  a09020e0  534875f8  
                                                          a09020e4  53488000  
                                                          a09020e8  534875f8  
                                                          a09020ec  53488000  
                                                          a09020f0  53488000  
                                                          a09020f4  53488000  
                                                          a09020f8  53488000  
                                                          a09020fc  53488000  
                                                          a0902100  39627b87  
                                                          a0902104  45e04040  
                                                          a0902108  53214998  
                                                          a090210c  45e08000  
                                                          a0902110  00000008  
                                                          a0902114  00000000  
                                                          a0902118  00000002  
                                                          a090211c  00000004  
                                                          a0902120  00000000  
                                                          a0902124  a54854cb  /data/app/com.google.android.webview-2/lib/arm/libwebviewchromium.so
                                                          a0902128  00000000  
                                                          a090212c  5320c624  
                                                          a0902130  a0902300  [stack:13211]
                                                          a0902134  00000000  
                                                          a0902138  a09022f8  [stack:13211]
                                                          a090213c  a4fd9ff7  /data/app/com.google.a
09-19 11:46:50.728 931-931/? W/ContextImpl: Calling a method in the system process without a qualified user: android.app.ContextImpl.sendBroadcast:1777 com.android.server.analytics.data.collection.application.CrashAnrDetector.broadcastEvent:296 com.android.server.analytics.data.collection.application.CrashAnrDetector.processDropBoxEntry:254 com.android.server.analytics.data.collection.application.CrashAnrDetector.access$100:60 com.android.server.analytics.data.collection.application.CrashAnrDetector$1.onReceive:102

What can be the cause?


#2

Your src is void, <img src= width=320 height=240>. Also you need to add quotes to the attributes, your tag should be like that:
<img src="" width="320" height="240">


#3

I did well on my app. Just made mistake while writing here.


#4

Can you post the code so i can check if there’s something that could go wrong?


#5

Clear project.
Just home.html is modified.

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  The world is your oyster.
  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
  </p>
  <ion-img src="<ip-stream>" width="320" height="240"></ion-img>
</ion-content>

#6

for now, replace
<ion-img src="<ip-stream>" width="320" height="240"></ion-img>
with
<img src="<ip-stream>" width="320" height="240" />

and see if it still crashes.


#7

I tested the code and it works fine, if you start a blank project it crash?


#8

Yes. But it never happens after just opened app. It happens sometimes after 30s, after 2min or even later. And it happens sometimes.
I will check other streams. Maybe my camera stream “destroys” something :confused:

As I said before - tested both ways. And it makes crash.


#9

What do you want to do? a live preview of your camera? If so there’s a plugin called camera preview. Here’s the link of the pluggin:


#10

A live preview of camera IP.


#11

<ion-img> is only intended to be used in conjunction with virtual scroll. It is not a drop-in replacement for <img>.


#12

I have a similar problem in Ionic 3.
I need to implement a video stream of a mjpeg into my app.
When I browse the stream http://[InsertStreamUrl] the stream works, but when I put an
<img src="http://[InsertStreamUrl]"/>in the application, it doesn’t show the video.

Any idea how to solve this?