I'm making a virtual tour in a house using React VR and would preload next panorama image when the user transport from room. After preload I would use the image from the local disk cache.
I've tried this code below
<Pano style={{ display: 'none' }} source={asset(`360/${this.thePanoImage}`)} />
But it doesn't see on image below.
Above the red line is when the virtual tour is loading for the first time. You see leefruimte.jpg is downloaded in nine milliseconds. After transportation (under the red line), leefruimte.jpg is downloaded again, but now in twelve milliseconds.
I'm accepting that the image leefruimte.jpg was taken from the loaded image in scene zero and was cached.
Also the images navigationCircle.png and focusspot.png, wouldn't be preloaded.
Note: This is most likely going to change in the future, but at the time of writing, you can look into the Prefetch component.
Prefetch only works with Panos at the time, but it looks like it's enough for your current needs.
import {Prefetch} from 'react-vr';
...
...
render() {
return (
...
<Prefetch key={someUniqueKey} source={asset(`360/${this.thePanoImage}`)} />
...
);
}
Pano's source code checks for Prefetch's cache when loading an image. So when you try and load the Pano for this.thePanoImage next, the image should be available in the cache and won't be fetched a second time.
Related
i'm trying to display the picture of a shop in a single-shop page after clicking on said shop on the shop-list page.
once i clicked it takes the datas (from phpmyadmin) of that shop only and display the details. the name, adresse, phone number, etc all work but the picture.
i created a colomn image where i stock the url that leads to the picture located in my assets folder of the react folder.
but i tried just with url to see if the Image balise would work... AND IT WORKED :
<View><Image style={{resizeMode : 'cover'}} source= {require('../../../assets/picture1.jepg')} /></View>
so i then tried with an object called pharmaimages (it's basically just the url itself that i stocked in my database with the '' included) but it says invalid. i also tried with the propriety uri but it's even less clear.
<View><Image style={{resizeMode : 'cover'}} source= {require(pharmaimages)} /></View>
in my mind it makes perfect sense but it just doesn't work
Try storing it as require('../../../assets/image.jpeg') in the database. Fetch the data and then once you map it or whatever you do in your app, show it using the following code:
<View>
<Image style={{resizeMode : 'cover'}} source={image} />
</View>
This is one of the common issues, that most of developers got into.
The other answers may also right, But to be more precise I am adding my comments on this Question.
Actually, the require statement will never evaluate value we are passing as parameter, It will directly look for the path we are providing into it, also It is working in same way like we are importing other libraries or Components.
So if we provide dynamic value at run time with require we may fail to see expected behaviour.
Here, I am also attaching some important links which might help you to understand clearly.
Links:
React Native Official Image Doc
Same issue related thread on Stackoverflow
WORKAROUND
To go with workaround for this kind of situation you can directly store your file paths with require function in your data storage.
for ex.
Instead of storing path like '../../../abc/def.png'
Store value as require('../../../abc/def.png')
I'm using Vue 3 along with Tailwind and in my template I display a list of background images, so I'm looping through an array of images and this div is responsible for showing them:
<div :class="`h-full bg-[url('#/assets/img/${article.preview_image}')] bg-center bg-no-repeat bg-cover hover:scale-105 transition duration-[2000ms] ease-in-out`" />
This way it doesn't work although I have no errors in the console and when I check the DOM it's rendered alright, the images just don't show up
The weird part is that when I hard code the name of the image like bg-[url('#/assets/img/my_image.jpg')] it works, and when I go back to using my loop variable it still works although it was not working at first, and it's not cache related because I disabled it
And then when I restart the server the images are gone again
Any idea what's causing this?
By the way, the data comes from a data.json file, if it matters. Like:
[
{ preview_image: 'xxx.jpg'},
{ preview_image: 'xxx.jpg'}
{ preview_image: 'xxx.jpg'}
]
I tried to use a .ts file instead but the problem remains
This may be a webpack issue where your image files are not bundled correctly. I se you have tried a .ts file. Can you try again but use require("filePath"), with the image files. This ensures that the files are bundled.
Cheers :)
I'm running Ubuntu 16.04. And on Android Studio when I try to run my application in the emulator I get the following error:
FATAL EXCEPTION: main
Process: project name here, PID: 2528
java.lang.RuntimeException: Canvas: trying to draw too large(216090000bytes) bitmap.
at android.view.DisplayListCanvas.throwIfCannotDraw(DisplayListCanvas.java:260)
at android.graphics.Canvas.drawBitmap(Canvas.java:1415)
at android.graphics.drawable.BitmapDrawable.draw(BitmapDrawable.java:528)
at android.widget.ImageView.onDraw(ImageView.java:1316)
at android.view.View.draw(View.java:17185)
at android.view.View.updateDisplayListIfDirty(View.java:16167)
at android.view.View.draw(View.java:16951)
at android.view.ViewGroup.drawChild(ViewGroup.java:3727)
at android.view.ViewGroup.dispatchDraw(ViewGroup.java:3513)
at android.view.View.updateDisplayListIfDirty(View.java:16162)
at android.view.View.draw(View.java:16951)
at android.view.ViewGroup.drawChild(ViewGroup.java:3727)
at android.view.ViewGroup.dispatchDraw(ViewGroup.java:3513) at
etc...
I did have to run through some hoops to get my emulator working however, needed to create a sym-link so I can run the emulator on AMD. Not sure if this is part of the problem. And for the life of me I cannot figure why it continues to do this. In my group there are others who emulate the project just fine on the same emulated phone and SDK.
Move your image in the (hi-res) drawable to drawable-xxhdpi. But in app development, you do not need to use large image. It will increase your APK file size.
The solution is to move the image from drawable/ folder to drawable-xxhdpi/ folder, as also others have mentioned.
But it is important to also understand why this somewhat weird suggestion actually helps:
The reason is that the drawable/ folder exists from early versions of android and is equivalent to drawable-mdpi. When an image that is only in drawable/ folder is used on xxhdpi device, the potentially already big image is upscaled by a factor of 3, which can then in some cases cause the image's memory footprint to explode.
This solution worked for me.
Add these lines in your Manifest application tag
android:largeHeap="true"
android:hardwareAccelerated="false"
I had the same problem.
If you try to upload an image that is too large on some low resolution devices, the app will collapse.
You can make several images of different sizes (hdpi, xxdpi and more) or simply use an external library to load images that solve the problem quickly and efficiently.
I used Glide library (you can use another library like Picasso).
panel_IMG_back = (ImageView) findViewById(R.id.panel_IMG_back);
Glide
.with(this)
.load(MyViewUtils.getImage(R.drawable.wallpaper)
.into(panel_IMG_back);
This issue can be resolved by 3 methods as follows:
Method 1:
By adding image into a res/drawable-nodpi folder (By doing this it will not pre-scale your image).
Method 2:
Generate all dpi(hdpi,ldpi,mdpi,xhdpi,xxhdpi,xxxhdpi) of image and add to drawable folder. (This process will increase APK size).
Method 3:
Add image to drawable/drawable-xxhdpi folder.
All these methods are verified.
Turns out the problem was the main image that we used on our app at the time. The actual size of the image was too large, so we compressed it. Then it worked like a charm, no loss in quality and the app ran fine on the emulator.
For this error was like others said a big image(1800px X 900px) which was in drawable directory, I edited the image and reduced the size proportionally using photoshop and it worked...!!
If you don't want your image to be pre-scaled you can move it to the res/drawable-nodpi/ folder.
More info: https://developer.android.com/training/multiscreen/screendensities#DensityConsiderations
if you use Picasso change to Glide like this.
Remove picasso
Picasso.get().load(Uri.parse("url")).into(imageView)
Change Glide
Glide.with(context).load("url").into(imageView)
More efficient Glide than Picasso draw to large bitmap
I also had this issue when i was trying to add a splash screen to the android app through the launch_backgrgound.xml . the issue was the resolution. it was too high so the images memory footprint exploded and caused the app to crash hence the reason for this error. so just resize your image using a site called nativescript image builder so i got the ldpi,mdpi and all the rest and it worked fine for me.
I just created directory drawable-xhdpi(You can change it according to your need) and copy pasted all the images to that directory.
This can be an issue with Glide. Use this while you are trying to load to many images and some of them are very large:
Glide.load("your image path")
.transform(
new MultiTransformation<>(
new CenterCrop(),
new RoundedCorners(
holder.imgCompanyLogo.getResources()
.getDimensionPixelSize(R.dimen._2sdp)
)
)
)
.error(R.drawable.ic_nfs_default)
.into(holder.imgCompanyLogo);
}
Try using an xml or a vector asset instead of a jpg or png.
The reason is quite obvious in the exception name itself i.e. the resolution of the resource is too large to render.
You can png to xml using online tools like https://svg2vector.com/ OR add your image to drawable-xxhdpi folder.
Solution for Picasso is add Transformation for resize image.
class ResizeTransformation(private val maxSize: Int) : Transformation {
override fun transform(source: Bitmap?): Bitmap? {
var result:Bitmap? = null
if (source != null) {
var width = source.width
var height = source.height
val bitmapRatio = width.toFloat() / height.toFloat()
if (bitmapRatio > 1) {
width = maxSize;
height = (width / bitmapRatio).toInt()
} else {
height = maxSize;
width = (height * bitmapRatio).toInt()
}
result = Bitmap.createScaledBitmap(source, width, height, true)
source.recycle()
}
return result
}
override fun key() = "resize()"
}
Use:
Picasso.get()
.load(url)
.transform(ResizeTransformation(2400)) //FHD+ resolution
.into(view)
Convert your all png formats into webs format. You can do it by Android Studio.
I am referencing external image urls for the source property of an image element in my app.
I have 3 versions of the image at 100, 140 and 180 scales e.g.
myimage.scale-100.jpg
myimage.scale-140.jpg
myimage.scale-180.jpg
If the images lived in the app you would normally put the source like the following and Windows works out which image to load based on the resolution scale of the device:
ms-appx:///Assets/Images/myimage.jpg
However as my 3 images live externally I am having to work out the resolution scale and then build up the correct source string so that the correct image is loaded e.g:
http://www.mywebsite.com/myimage.scale-180.jpg
This works, however, windows is taking my image e.g. the 180 scale one myimage.scale-180.jpg, and then scaling it up by a further 180%, it doesn't know that I have loaded an image at the correct 180% scale already and that it doesn't need to scale it up!
Is there a way of telling it not to scale up specific image elements?
Update (added code):
The xaml image element:
<Image Source="{Binding Image, Converter={StaticResource ImageToExternalImagePathConverter}}" HorizontalAlignment="Left" VerticalAlignment="Top" Stretch="None" />
The converter used on the image element to determine the external image path (it works out the scale and uses the binding to build up the correct string).
public object Convert(object value, Type targetType, object parameter, string language)
{
ResolutionScale resolutionScale = Windows.Graphics.Display.DisplayInformation.GetForCurrentView().ResolutionScale;
string ImageScale = ".scale-100";
switch (resolutionScale)
{
case ResolutionScale.Scale140Percent:
ImageScale = ".scale-140";
break;
case ResolutionScale.Scale180Percent:
ImageScale = ".scale-180";
break;
}
//builds up the correct string e.g. http://www.mywebsite.com/myimage.scale-180.jpg
string externalPath = "http://www.mywebsite.com/" + (string)value + ImageScale + ".jpg";
return externalPath;
}
Update(added reference):
To further explain what I am currently doing see this link:
http://msdn.microsoft.com/en-us/library/windows/apps/hh465362.aspx
Manually load images based upon scale percentage at runtime If your
app is loading images at runtime using code, for example if you use
DirectX directly, not XAML or HTML to create your UI, use the
DisplayProperties.ResolutionScale property to determine the scale and
manually load images based upon scale percentage.
So that's what I am doing, but the problem is that Windows is scaling up the UI as it should to 140% or 180%, and that includes my manually loaded image. So if I manually load in an image that is already sized at 140%, it gets scaled up by Windows anyway and it DOES get physically bigger. If the images lived in the app package this problem wouldnt exist because Windows recognises the filename identifiers and doesnt scale them up (see below)
Use resource loading for bitmap images in the app package For bitmap
images stored in the app package, provide a separate image for each
scaling factor(100%, 140%, and 180%), and name your image files using
the "scale" naming convention described below. Windows loads the right
image for the current scale automatically.
How can I replicate the same behavior from Windows for images that live in the app package but for images that are external to the app and are loaded manually? Logically at the point at which I load the image in (code), I want to say to Windows, this image is already scaled correctly, don't upscale it by the resolution factor.
Try sizing grip property to false
Is it possible to retrieve the dimensions of an image stored on Amazon S3?
If the answer is no, are there any other ways around it other than downloading the image to my server to which sounds inefficient?
I'm using version 2 of the AWS SDK for PHP.
I've been looking through what is returned from the following code but doesn't seem to give dimensions.
$result = $s3->getObject(array(
'Bucket' => 'BUCKET_NAME',
'Key' => 'KEY_NAME'
));
var_dump($result);
I'm not 100% familiar with SDK2. With 1.5 you could do this
getimagesize($s3->get_object_url($bucket,$filename));
I think this is still possible as long as you can access publicly the image (or you have to find your way around authorized urls)
Obviously, your php must be enabled to open remote files.
I agree with the db cache. I run every image filename through a class that checks mysql for a match. If it finds one, it returns width, height and a preformatted sizetag ready to go. If the image and size are not found, it uses getimagesize() to return the same info, which it stores for next time. I also built in a resize method should I want to cheat a bit and resize the sizetag (but not the file) proportionally on the fly.
I don't know if storing the info is faster than getimagesize() as it downloads. S3 is pretty fast.
Due to lack of response I'll presume it's not possible... Didn't r3ally want to do it with JavaScript but this is how I did it.
<img src="image.jpg" id="image" />
<script>
// This runs after the image has loaded
$('#image').load(function() {
// Use the below code to get the height and width
// document.getElementById('image').width
// document.getElementById('image').height
});
</script>