i have created nativescript angular app with nativescript side kick software with navigation drawer template, i want to display image in home page from local file system.
i am using latest angular and nativescript
APP
--> images
--> Home
Local Build and Cloud Build
<Image src="res://icon" ></Image> --> showing image
<Image src="../images/intensepic.jpg" ></Image> --> if i click on "..images/intensepic.jpg" using ctrl+click its going to path of images in project and pick image but image is not showing in app.
<Image src="~/images/intensepic.jpg" ></Image> --> if i click on "~/images/intensepic.jpg" using ctrl+click its failed find images in project and not able to pick image and image is not showing in app.
<Image src="/app/src/images/intensepic.jpg" ></Image> --> if i click on "/app/src/images/intensepic.jpg" using ctrl+click its going to path of images and pick image but image is not showing in app.
Nativescript Playgrond
<Image src="res://icon" ></Image> --> showing image
<Image src="../images/intensepic.jpg" ></Image> --> image is not showing in app.
<Image src="~/images/intensepic.jpg" ></Image> --> image is showing in app.
Which platform(s) does your issue occur on?
Both
as intensepic image is in images folder not in App resources, no need to use res://
There must be problem with image path
try this one
<Image src="~/images/intensepic.jpg"></Image>
or
<Image src="~/app/images/intensepic.jpg"></Image>
Please go through the doc to understand how the image path works.
res:// - Prefix to be used if the image is placed in the iOS / Android drawable folder located inside App_Resources.
~/ - Points to the application directory.
Between relative paths may not work here at all. If you are sure the path was correct then try running a clean build to make sure all resources are copied.
Related
I am displaying an image URL using ffimageloading:CachedImage.
<ffimageloading:CachedImage
CacheDuration="0"
Aspect="AspectFill"
VerticalOptions="{Binding HasImageRatioSwitch}"
HorizontalOptions="{Binding HasImageRatioSwitch}"
Source="{Binding AvatarSource}"/>
(AvatarSource is the URL).
The problem is that when I change the image URL, the updated image isn't displayed and the old one remains instead. Only when I delete the app and rerun it is when the new image displays properly.
This only happens on iOS... On Android I get my expected result without any issues, directly after updating the image.
Thanks in advance.
I want to display some .gif icons on android project.. but many icons not moving.. I don't know why.. ?
I have a <Image/> with propertie: IsAnimationPlaying="True" and this work only for three gifs and other gifs not moved...
<Image Source="rain.gif"
IsAnimationPlaying="True"
WidthRequest="40"
HeightRequest="40"
Grid.Row="2"
Grid.Column="1"/>
In drawable folder I set all gifs to AndroidResource property but this not work..
Аnd after all, the icon is not the one I placed in drawable folder.
I set rain.gif who is not this one from the screenshot.
This is real icon rain.gif:
So the first three .gif icons is moved and worked (thermometers), other .gif icons not worked and rain.gif is different I don't know why ?
Could it be that the problem is that I have the same name with different extensions in drawable folder, like: rain.jpg rain.png...
I try many times to clear the project and build again and again but not worked for me..
Becasue Android doesn't have built-in support for loading gif into ImageViews.
You could display gif with some commonly used third-party controls.
Like FFImageLoading
<ffimageloading:SvgCachedImage Source="rain.gif" WidthRequest="40"
HeightRequest="40"
Grid.Row="2"
Grid.Column="1"/>
I am building a Android and iOS app and wanted to use sans-serif front on a label but I dont see it on the http://iosfonts.com/. I see the front on https://fonts.google.com/?query=sans+serif but I am not sure what to use in the FontFamily tag?
<Label Grid.Row="1" Text="TestFrontFamily" LineBreakMode="WordWrap" FontSize="20" HorizontalOptions="Center" VerticalOptions="End" TextColor="White" FontFamily="sans-serif"></Label>
As a general rule, you should never change the font in your app. Use the system default font. This is what people are used to on their phone, and opening an app that uses a different font is jarring.
With that out of the way, you need to download the font file, either otf or ttf, and save it somewhere in each android and iOS project. Then the font family points at that file. For example:
Font file placed in Fonts folder:
iOS: FontAwesome5ProLight
Android: Fonts/fa5-pro-light-300.otf#FontAwesome5ProLight
For iOS you simply need the font family name to be the name of the font to use. For Android, you need to include the path relative to the android csproj file as well as the font file name followed by # and the font name.
See Xamarin Font Documentation for further information.
I have some icons on my xamarin forms project. I need a circle background for my icon. See the screenshot below:
I tried Xam.Plugins.Forms.ImageCircle plugin and tried Framelayout. Imagecircle plugin only cropping the icon and Framelayout gives a rounded corner layout. Nothing gives me a perfect circle background. I go through the FFImageloading documentation, but which is also the same as Imagecircle plugin.
Image code
<Image
Source="ic_group_fill_xx.png"
WidthRequest="25"
HeightRequest="25"/>
Is there any way to achieve this feature?
I usually prefer to make an icon that by default has a circle in it, doesn't make sense to add extra code for something that can be done for free.
There is great document by Android on working with Images for Android applications which can be found here, you can also use Android Asset Studio for creating awesome images.
I normally use an ImageButton for this (and because of the clicked property you don't need to use Gesture Recognizers for detecting taps)
The code below gives me a perfect circle on Android & iOS
<ImageButton Source="icon_name"
BackgroundColor="Blue"
HeightRequest="60"
WidthRequest="60"
CornerRadius="30"
Padding="15"
Clicked="Btn_Clicked" />
The image below is from my app, the image button is inside AbsoluteLayout and the icon is 64x64
Use the ImageCircle.Forms.Plugn plugin which I am already using it,
Import namespace like below,
xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin"
And use the image control like below sample,
<controls:CircleImage
Source="{Binding ProfileImage}"
HorizontalOptions="Start"
VerticalOptions="Center"
WidthRequest="40"
Aspect="AspectFill"
BorderColor="#B8BCC9"
BorderThickness="1"
HeightRequest="40" />
I have several images with the png extension in my project where in android and ios they appear correct, already in universal windows they do not appear. I made the test the following I changed one of the images to jpg and funcionol, appeared my image in universal windows. Will I have to change all the images? Or do you have a way to solve this so that my images will be PNG?
An example of how I call the pictures ...
<StackLayout Orientation="Horizontal">
<Image Source="facebook.png" HeightRequest="25" WidthRequest="25"/>
<Image Source="twitter.png" HeightRequest="25" WidthRequest="25"/>
<Image Source="whatsapp.png" HeightRequest="25" WidthRequest="25"/>
</StackLayout>
Most likely URI resolution fails, you should really follow documentation's guidelines when it comes to working with embedded images.