triniwiz / triniwiz/nativescript-plugins

Image is not showing

Open
#69 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
C
Stars
87
Forks
57
Avg merge
1h 36m
Merged PRs (30d)
4

Description

Which platform(s) does your issue occur on?

Android 11 real device

Please, provide the following version numbers that your issue occurs with:
  • CLI: 8.0.2
  • Cross-platform modules: 8.0.7
  • Runtime(s): 8.0.0
  • Plugin(s):
"dependencies": {
    "@nativescript-community/ui-collectionview": "^4.0.32",
    "@nativescript/core": "^8.0.7",
    "@nativescript/firebase": "^11.1.3",
    "@nativescript/theme": "^3.0.1",
    "@nstudio/nativescript-cardview": "^2.0.1",
    "@nstudio/nativescript-checkbox": "^2.0.4",
    "@nstudio/nativescript-loading-indicator": "^4.0.0",
    "@triniwiz/nativescript-image-cache-it": "^7.0.8",
    "@triniwiz/nativescript-image-zoom": "^4.1.0",
    "@triniwiz/nativescript-toasty": "^4.1.1",
    "@triniwiz/nativescript-youtubeplayer": "^4.1.3",
    "nativescript-carousel": "^7.0.1",
    "nativescript-exit": "1.0.1",
    "nativescript-gif": "^5.0.0",
    "nativescript-material-icons": "^1.0.3",
    "nativescript-permissions": "^1.3.11",
    "nativescript-phone": "^2.0.0",
    "nativescript-photoviewer": "^2.1.5",
    "nativescript-ui-dataform": "^7.0.4",
    "nativescript-ui-listview": "^9.1.0",
    "nativescript-ui-sidedrawer": "^9.0.3"
  },
  "devDependencies": {
    "@nativescript/android": "8.0.0",
    "@nativescript/ios": "7.1.1",
    "@nativescript/webpack": "~5.0.0-beta.0"
  }

I don't understand what's wrong with this. The URL is fine and I do see the image if I manually put the URL in the src field. But when using a viewModel or even setting it like on lIne 16, the image doesn't appear. This is in a modal if that makes a difference.

XML

<Page shownModally="onShowModally" xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:ui="@triniwiz/nativescript-image-zoom">
  <StackLayout>
  	<ui:ImageZoom  src="{{ image }}" id="imageEl" loaded="onLoaded" aspectFill="stretch" width="200" height="200" />
  </StackLayout>
</Page>

JS

import { fromObject } from '@nativescript/core';

var page,
	viewModel = new fromObject({
		image: null,
	}),
	closeCallback;

export function onShowModally(args) {
	page = args.object;
	closeCallback = args.closeCallback;
	viewModel.image = args.context[0].image;
        page.bindingContext = viewModel;

  let imageEl = page.getViewById('imageEl');
  imageEl.src = viewModel.image;
}

export function onLoaded(){
	console.log('image loaded'); //works
}
export function closeModal(){
	closeCallback();
}

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the modal XML and its JavaScript handler, especially onShowModally, the image binding, and the ImageZoom view. Reproduce on an Android 11 device with the listed NativeScript versions and compare direct src assignment with the view-model value; done means the image renders in both cases.

Written by the indexing model from the issue text.

Assessment

Tech stack
android, javascript
Domain
frontend, mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.