When I do the following:
<Image source={require('./images/hex-loader2.gif')} style={{width:400,
height: 400}} />
I get the following error:
Unable to resolve module ./images/hex-loader2.gif from
/Applications/react/xxxx/views/LoginView.js: Invalid directory
/Applications/react/xxxx/views/images/hex-loader2.gif
Folder Structure is:
projectRoot > views > images
Any ideas why?
When I put the image at the same level of LoginView.js it works but as soon as I add it to the images folder I get the above error.
Related
I'm new in next js. i recently deployed my project to vercel. everything is working fine. but images are making errors as shown below
Failed to load resource: the server responded with a status of 502 ()
image URL: https://portfolio-l2jkasia3-shafeequeot.vercel.app/_next/image?url=%2F..%2Fpublic%2Fimages%2Fnetflix.jpg&w=384&q=75
at the same time I have used import images. it is working fine after deploy
On localhost everything is working fine, but when I deploy my website to Vercel the images do not load properly.
images given as below
<Image width={330} height={220} className='object-fill w-44' src={key.image} alt={key.name}></Image>
import images as below (it is working after deploy)
import Cover from '../public/cover.jpg'
<Image className='object-fill w-44' src={Image} alt={key.name}></Image>
Can somebody help me?
i have referred this Images not loading in Next.js application after deploy on Vercel
but no luck
I also had this issue and fixed it by dropping the ../public and just using the path to the image as if I was already operating inside the public folder.
Change the value of key.image to "/cover.jpg"
<Image className='object-fill w-44' src={key.image} alt={key.name}></Image>
You can also try using the img tag instead. This worked with my deployed(to Vercel) nextjs app.
When I add some image from my assets folder using require, the image is apparently being taken from a folder .png-cache , but react native probably has bad paths stored in them because I get an error wherever I've used the same file as the image source.
My code is:
<Image
source={require('#assets/images/thunder.svg')}
height={20}
width={20}
resizeMode={'contain'}
style={styles.actionButtonIconStyle}
/>
The image doesn't show up and the console shows:
Error: Asset not found: C:\Users\<project path>\src\assets\images\.png-cache\thunder-31748fee8334daf886e2bea1259f80c9#3x.png for platform: android
at getAbsoluteAssetRecord (C:\Users\<project path>\node_modules\metro\src\Assets.js:110:11)
at async getAsset (C:\Users\<project path>\node_modules\metro\src\Assets.js:238:18)
at async Server._processSingleAssetRequest (C:\Users\<project path>\node_modules\metro\src\Server.js:352:20)
at async Server._processRequest (C:\Users\<project path>\node_modules\metro\src\Server.js:427:7)
Not sure why the current paths are not valid. Is it possible to make it so that the old cached paths are forgotten and new cache file generated?
What I've tried:
I renamed one image file and it worked but I wouldn't want to rename all the files, looking for a way to reset the cache.
I looked at the solution in Reset internal android image cache in React Native but I can't have dynamic paths in require so this solution didn't work.
I see first time using like #asset...
In my code i everytime use like this:
<Image
source={require('../assets/images/thunder.svg')}
height={20}
width={20}
resizeMode={'contain'}
style={styles.actionButtonIconStyle}
/>
am i missunderstanding what you need?
My problem was solved by resetting the react native cache with the command:
npm start -- --reset-cache
I am building an IOS application using ReactNative. My app needs to display image from the local file system or gallery or the ones captured by the camera. But it is not working. I am displaying something like this.
<FastImage
style={[imageStyle.image]}
source={{ uri: source }}
/>
This is the library I am using, https://github.com/DylanVann/react-native-fast-image. The source value is something like this.
As you can see, it is not displaying the image. What is wrong with my code and how can I fix it?
I also tried prepending "file://" to the path as well. It did not work either.
If you are using a local file. The source prop should have a file path instead of a uri. Let’s say your image is located at ./Images/myImage.png. Try this:
source={require("./Images/myImage.png")}
const directoryPath = Platform.OS === 'android' ? RNFS.PicturesDirectoryPath : RNFS.DocumentDirectoryPath;
<FastImage
style={YOUR_IMAGE_STYLE}
source={{uri: `file://${directoryPath}/${YOUR_IMAGE_FILE_NAME}`}}
/>
PS: on Android, must use file://
PS: Need enable fs permission, ref to ENOENT: open failed: EACCES (Permission denied), open '/storage/emulated/0/Download/ on Android, and IOS file downloaded not able to be located on device on iOS.
I am using react-native-config for setting environment variable in my react native project. I have a local image url in my .env config file. I am able to get the local image url in my component using Config.LOGO_URL. Code snippets of files are following:
Environment config file i.e .env
LOGO_URL='logo.png'
I am using the LOGO_URL in the component as below:
import Config from 'react-native-config';
render() {
<View>
<Image source={require(`../../assets/images/${Config.LOGO_URL}`)} />
</View>
}
When I am trying to use config variable Config.LOGO_URL in Image source I am getting error invalid call in require(). However, hardcoded path to image source is working as expected.
Am I missing something? Thanks! in advance.
The problem is not with Config its with the way that you are accessing the images in runtime, as its a static resource you will have to require it beforehand and the use something like a switch to change your logo.
More info in the below answer on requiring images.
React Native - Image Require Module using Dynamic Names
I'm having an issue with adding static images to my project. I added a resource folder with images inside, restarted the packager and get the following error:
error: bundling failed:
Error: Unable to resolve module `../../assets/img/receiptIcon.PNG` from
`C:\Users\Keith\Desktop\Phase1\Screens\Receipts\ReceiptRow.js`:
The module `../../assets/img/receiptIcon.PNG` could not be found from
`C:\Users\Keith\Desktop\Phase1\Screens\Receipts\ReceiptRow.js`. Indeed, none of
these files exist:`C:\Users\Keith\Desktop\Phase1\assets\img\receiptIcon.PNG(.native||.android.js|.native.js|.js|.android.json|.native.json|.json)`
`C:\Users\Keith\Desktop\Phase1\assets\img\receiptIcon.PNG\index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json)`
Copying the path below into File Explorer opens the image as expected. I've made sure there are no special chars in the file path as suggested in other posts, I've copied the image into the same directory as the js file but I still get an unresolved module error.
This is how I am adding the image:
(I've tried using different paths with the same result, 'receiptIcon.png', './receiptIcon.png', './../../assets/img/receiptIcon.png', './../../assets/img/receiptIcon.PNG' )
<View style={styles.iconContainer}>
{/* icon image*/}
<Image source={require('./receiptIcon.PNG')} style={styles.icon} />
</View>
Is there anything I am missing because as far as the documentation says I just need to add the image to the project dir and the packager does the rest?
I'm using
react-native-cli: 2.0.1
react-native: 0.52.0
(I also have images working when loaded from a URL, from taking a picture and from the Camera Roll/Gallery)