I have two scenes in my app (react-navigation).
Scene 1: Flat List with an Image per row
Scene 2: Same Image with some more details
If I am navigating from Scene 1 to Scene 2 the component is always loading the Image again.
Why does the Image-component not use the Image from the cache? On other components (without navigating) the Cache is working. Cache-Control is set to max_age=2592000.
If the image(s) are static, you can import and export them from a single file:
export default class Images {
static image1 = require("../public/images/image1.jpg");
static image2 = require("../public/images/image2.jpg");
}
You can use a tool like https://github.com/wcandillon/react-native-static-images to script this for you.
Related
I'm using this input for adding new image
<input type="file" id="profile_photo_add" ref="profile_photo_add" #change="createProfilePhotoPreviewInAdd"/>
<vue-cropper
v-if="urlProfilePreviewAdd"
ref="cropperAdd"
:src="urlProfilePreviewAdd"
alt="Source Image"
:aspectRatio="16/9"
:initialAspectRatio="16/9"
:autoCropArea="1"
:zoomable="false"/>
And this method for creating object url for cropper
createProfilePhotoPreviewInAdd(e)
{
this.urlProfilePreviewAdd = URL.createObjectURL(e.target.files[0]);
console.log(this.urlProfilePreviewAdd)
console.log(this.$refs.cropperAdd)
}
First time when i upload a image, the cropper shows that image, if i'm trying to upload other image, the cropper doesn't refresh.
If i console.log the cropper ref and the urlProfilePreviewAdd i see that urlProfilePreviewAdd is changing but the cropper ref target stays the same as first time.
How to update in real time with the input, the cropper too?
SS for console.logs
Take a look to ss for console.logs too here.
You must call the replace function on the cropper instance as noted in the documentation
Replace the image's src and rebuild the cropper.
setImage(e) {
this.urlProfilePreviewAdd = URL.createObjectURL(e.target.files[0]);
this.$refs.cropper.replace(this.urlProfilePreviewAdd);
},
I'm working on a requirement where I planned to dynamically set the URL on load of the component.
I have a tag where the src attribute will be set from a service call which would return image. If the image is not present I need to set a fallback image. How can I handle this.
The image is in binary code format(.png) image
I had a similar problem. This is my solution :
1)For the image you set a dynamic src like this :
< img :src="image" >
In the data you set image to the url or relative path of the image you want to use as a default. Like this :
Data() {
return {
image : "path",
}
}
You preload the default image your main html file, like this :
< link rel="preload" type="image" or type="img/png" href="path" >
To change the image to the image in the axios call you just write :
this. image = messageImg
I hope this is helpfull.
I have expo 30 proyect and the fonts ( fontello icons ) load succesful now 3 months later I reopen the proyect before update expo and fonts does´t load even if I create a new proyect the fonts does´t
(I have already changed the import from
import { Font } from 'expo';
to
import * as Font from 'expo-font';)
here's a snack with the problem https://snack.expo.io/#emmalv/bold-banana
it's curious that in expo-cli when I run the same code and print the state of loading first return false and before true and inmediately show red screen saying that font has not been loaded through Font.loadAsync
I've tried wirtting everything in the app class instead of loading the fonts from another file and the behavior is the same
other thing I've tried is like the new documentation says, use expoAssetId
const expoAssetId = require("assets/fonts/custom-icon-font.ttf");
const Icon = createIconSetFromFontello(fontelloConfig, 'FontName', expoAssetId);
but I get another error
C.replace is not a function. (In 'C.replace(/\.(otf|ttf)$/,'')', 'C.replace' is undefined)
Expected Behavior
the icons load and show correctly
Actual behavior
when load throw an exception 'fontFamily "../assets/fonts/sowaicons" is not a system font and has not been loaded through Font.loadAsync.' and show a square instead of the icon
Enviroment
Windows 10
sdkVersion: 35.0.0,
expo: ^35.0.0",
expo-font: ~7.0.0
I created working example:
https://snack.expo.io/#djalik/custom-fonts
change CustomIcon code:
import { createIconSetFromFontello } from '#expo/vector-icons';
import fontelloConfig from '../assets/fonts/config.json';
// const ttf = require("../assets/fonts/sowaicons.ttf");
// import myfont from "../assets/fonts/sowaicons.ttf";
const Icon = createIconSetFromFontello(fontelloConfig, 'sowaicons');
and replace this.state.setState... to this.setState
I have images inside a component not displayed at launch.
When i show my component, my images are not displayed instantly, but are loaded.
I would like to preload my images on the root app, to be instantly displayed when the component is active.
How would you do that?
components are bind to dom only when they are created. images will be loaded only when dom sent request. you can try something
let image = new Image();
image.src = 'something.png'.
this will trigger a network request. you can use the image variable as props to component
You can also do it with css background images. Simply add this css to your global styles:
html {
background-image: url('url1.jpg'),
url('url2.jpg'),
url('url3.jpg'); // list all images here
background-size: 0;
}
This might be a little bit hacky, but all images get preloaded asynchronously. From here on you can optimize it by going more specific on where to apply the styles e.g. scoped in child components or wherever you want.
If you have a lot of images you could also write a simple webpack plugin which generates this code dynamically.
I have to set a image on wizard dialogue in swt,classpath load this image but image not displayed properly. In my design create a composit in this composit create a lebel.there after in this lebel I want add an image.After that i will create a runnable jar.This jar will be executed with proper image. In my implementation part i have create a resources (src folder) within src folder and in this resources folder kept image which i need.Please find the below code,
File file = new File("resources/Automatics_Logo.png");
Image image = new Image(Display.getDefault(), file.getPath());
Label lblNewLabel_4 = new Label(composite, SWT.NONE);
lblNewLabel_4.setImage(SWTResourceManager.getImage(CheckSystemConfigurationAndInstallation.class,image.toString()));
Image imgSWT=null; // Image class is the SWT Image class
ImageDescriptor imgDesc=null;
java.net.URL imgURL = IntroductionPage.class.getResource("/Automatics_Logo.png");
if (imgURL != null) {
imgDesc = ImageDescriptor.createFromURL(imgURL);
imgSWT = imgDesc.createImage();