Loading image from url fails - android-jetpack-compose

I'm trying to load some icons from url using Coil. But it never shows on screen.
code:
Image(
painter = rememberAsyncImagePainter(icon),
contentDescription = "condition icon"
)
When I log the icon variable I got the url without problems:
icon: //cdn.weatherapi.com/weather/64x64/night/113.png
But the image doesn't appear on the screen, any help?

CoilImage(
imageModel = imageUrl,
// Crop, Fit, Inside, FillHeight, FillWidth, None
contentScale = ContentScale.Crop,
// shows a placeholder while loading the image.
placeHolder = ImageBitmap.imageResource(R.drawable.placeholder),
// shows an error ImageBitmap when the request failed.
error = ImageBitmap.imageResource(R.drawable.error)
)
This should work as a charm (link)

I solved this by adding https: before the url. It seems like Coil can't add this by default like it happens in the browser.

Related

AdManagerAdView not rendering ad image when off screen in LazyColumn

I am wrapping an AdManagerAdView in an AndroidView so I can use it in Jetpack Compose. The image fails to load when I use it in a LazyColumn AND the AdManagerAdView tries to load the image before the composable is on screen.
If I scroll quickly to that element, so LazyColumn composes it AND it is on screen before the image comes back from the ad server, it works as expected.
LazyColumn {
items(5) {
SomeOtherComposable(it)
}
item {
AndroidView(
modifier = Modifier
.width(300.dp)
.height(250.dp)
.background(Color.Green),
factory = { context ->
val adView = AdManagerAdView(context)
adView.adSize = AdSize.MEDIUM_RECTANGLE
adView.adUnitId = adUnitId
adView.loadAd(Builder().build())
adView
}
)
}
items(5) {
SomeOtherComposable(it)
}
}
For demo purposes...
#Composable
fun SomeOtherComposable(i: Int) {
Text(
text = "SomeOtherComposable $i",
modifier = Modifier
.fillMaxWidth()
.height(320.dp)
.background(Color.White)
)
}
This also works fine if the wrapped AdManagerAdView is used in a non-lazy Column or any other Compose layout.
This feels like a weird timing thing in LazyColumn that just happens to manifest when the Composable isn't on screen yet since using it in a regular Column works fine under the same scenario.
Has anyone experienced anything like this?
SOLVED
See my answer below
Ok, the issue is actually that both factory{} and update{} are called before the AndroidView has gone through the layout pass. In my steps to reproduce, the ad image is coming back and being added to the internal view before it has a measured width and height.
The solution is to delay that load call until after the layout pass using doOnLayout{} like so:
AndroidView(
modifier = Modifier
.width(300.dp)
.height(250.dp)
.background(Color.Green),
factory = { context ->
val adView = AdManagerAdView(context)
adView.adSize = AdSize.MEDIUM_RECTANGLE
adView
},
update = { adView ->
adView.adUnitId = adUnitId
adView.doOnLayout {
adView.loadAd(Builder().build())
}
}
)

Show Local Images and Server Images ( with Caching) in Flutter

I am trying to show the image in a Widget picked from Image-Gallery as well as from the Network loaded images.
CachedNetworkImage is working fine with Network-images but when I try to pass selected image from gallery it's not working.
CachedNetworkImage(
imageUrl: url,
placeholder: (context, url) => new CircularProgressIndicator(),
errorWidget: (context, url, error) => new Icon(Icons.error),
);
Please help me to show this.
Objective is to
1. Can load local images
2. Can load network images
3. Can show Cached images.
Thank you in advance.
You need to determine when you'd like to display local image and when to display image from network. If the network image needs to display the local copy once it has been downloaded, you can add a checker if that image file exist locally. Else, the image should be fetched from network/cache. You can use the imageId of the image URL to be the same identifier for the local image.
var imgUrlEndpoint = 'https://picsum.photos/250?image='
var imgId = '9';
var imgFile = File('path/to/file/$imgId.jpg');
// Check if image file exists
if(imgFile.exists()){
// Load image from storage
Image.file(imgFile);
} else {
// Load image from network
CachedNetworkImage(
imageUrl: '$imgUrlEndpoint$imgId',
placeholder: (context, url) => CircularProgressIndicator(),
);
}

Xamarin.IOS: Can't load image from Images.xcassets

Im working on Xamarin Studio, and I have a Storyboard which contains a UIImageView, its properties are set like this :
You can notice that chosen image is called personalPhoto which exists in the Images.xcassets like this
But when I run the app in the simulator, the image isn't loaded .. and the UIImageView looks empty
Even if try to add the UIImageView programatically using this code.. it gives me the same result
UIImageView personImage = new UIImageView {
Frame = new CoreGraphics.CGRect (0, 0, 200, 200),
Image = UIImage.FromBundle("personalPhoto"),
ContentMode = UIViewContentMode.ScaleAspectFill
};
this.View.AddSubview (personImage);
So do you have any idea what is the problem .. please give me some help ..
And thanks in advance ..
Restart your iPhone or Simulator and try again.
You can also clean (Product -> clean) and try again

Load image from solution in WebView Xamarin Forms

I have inside ScrollView images and i want selected image opened in some new page and have pinch and zoom , i try webview control but i cant load image from my solution path .
void loadhtml()
{
var htmlSource = new HtmlWebViewSource {
Html = "<!DOCTYPE html>\n<html>\n<body>\n<img src=\"myproject.Images.test.jpg\">\n</body>\n</html>"
};
MyWebView.Source = htmlSource;
}
Can i load image from path where is inside my app in WebView ? Another method for pinch and zoom ?
Thanks.
You can in fact load content that is bundled into you app with the Xamarin.Forms WebView. See this link: https://developer.xamarin.com/guides/cross-platform/xamarin-forms/user-interface/webview/
I hope that helps!

Load image on UIWebView and scale it correctly

I load an local image (tif) on to the UIWebView:
string fileName = "image.tif";
string localDocUrl = Path.Combine (NSBundle.MainBundle.BundlePath, fileName);
webView.LoadRequest(new NSUrlRequest(new NSUrl(localDocUrl, false)));
webView.ScalesPageToFit = true;
The image is bigger than the UIWebView.
Now I want that the image fits in the web view. How can I do this?
i am unable to give comment due to too less comment as i am a new user.
Plz goto nib file and check "Sceling" as "Scale page to fit"
Hope it will work
I'm not sure if this applies directly to a picture, but I had issues trying to get a webview to show correctly on the screen. This is the code that I used and hopefully it can work for you.
var webview = new UIWebView(this.View.Frame);
webview.LoadRequest(new NSUrlRequest(new NSUrl(myCustomUrl)));
this.NavigationController.PushViewController(
new UIViewController() { webview }, true);
Maybe setting the frame will help?

Resources