I've created a project using react-native-webpack-starter-kit and am trying to add static images to the project to use.
https://github.com/jhabdas/react-native-webpack-starter-kit
I tried simply adding an images folder next to the .js React component (in src/components) and tried the following but none seem to work. There's no error messages but the image just doesn't appear.
<Image source={require("image!add_people_icon")} style={styles.icon} />
<Image source={require("image!add_people_icon.png")} style={styles.icon} />
<Image source={require("./images/add_people_icon.png")} style={styles.icon} />
Is there anything I need to do in the actual xcode project, such as add the images to the images catalog there?
I'm using webpack / fileloader for serving images as well.
The referencing the images to the require is wrong ...
basically it will go and search for those files in the Xcode Project
So there are two solutions
solution 1: Add the respective images in the Xcode Project Image assets and then you can use as above
Solution 2: Use some cloudinary which will give you an absolute url and we can use it as
<Image style={/*ifneeded*/} source={{uri: ' //specify the url // '}} />
and the styles of images should contain Height and Width
Related
I'm trying to require an image from a location inside the SRC folder in React (not from public unfortunately) and the specific name of that image will be granted from props.
The issue is that I need the image to be set as the background image of a <div />. The image doesn't show up.
I tried that:
<div
style={{
backgroundImage: `url('${require(`../../assets/images/home/${banner?.srcString}`)}')`,
backgroundSize: "cover"
}}
/>
Is there any way to solve this without using <img /> and without moving all images to /public?
No, you can not require images dynamically from src directory, and it's not just limited to React, it's about all JavaScript frameworks that use Webpack internally. Also, this is exactly one of the use cases of public directory, as it's been mentioned in the documentation: When to Use the public Folder
You can also check the following links for more discussions around this question:
Load local images in React.js
How to give Image src dynamically in react js?
React, load images local from json
I've built an ASP.NET Core solution that is mainly just a shell for a React app. It's a card game that uses svg image files to represent the cards. When I run locally, the cards display as they should.
The issue is that when I build a Docker image and serve it up from Docker Desktop the images no longer show--just a placeholder where each would go.
The each card is the result of a small function:
export const Card = (params) => {
return <img src={'./cards/' + params.card + '.svg'}
onDoubleClick={() => { params.action( params.card ) }}
/>
}
My best guess is that the needed relative path in the docker image needs to be altered somehow so the files can be found.
In the VS solution, the folder structure looks like the following:
root
ClientApp
public
Cards <== card image svgs are here
src <==js code here
Any suggestions as to what might be causing the Docker version to not display the images?
Perhaps my better questions might be if the structure is something I should be managing in Dockerfile(?) or what a good way to see the structure Docker is using to arrange the files in the container?
Edit
I've noticed it doesn't seem to recognize a sub-folder (or I'm not referencing it correctly). Any images I place is the public folder (parent of cards) show.
To reference svg in public use:
<img src={process.env.PUBLIC_URL + '/yourPathHere.svg'} />
I had the same problem, deploying react with nginx into a docker
I used svg in my react app as an imported entity, so I imported the image and placed it as an variable in img.src attribute.
import Plus from 'svg/plus.svg'
.
.
.
<img src={Plus} />
I'm building an app using React Native with Expo. Everything works fine except the images, they load correctly but it takes about 2 seconds to load, and it's weird because all the images are local images and they are light too, so they should load instantly. This problem occurs also after I build and get the .apk on my android device so the images are always stored locally.
This is a portion of the main page of my app:
...
<View style={styles.bottomItem}>
<View style={styles.bottomItemInnerFirst}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('SecondPage')}>
<Image
source={require('../assets/images/iconT.jpg')}
style={{width: '100%', height: '100%'}}
resizeMode='contain'
/>
</TouchableOpacity>
</View>
</View>
...
The problem occurs not only with the Image tag but also with ImageBackground.
I've looked at this doc too https://docs.expo.io/versions/latest/guides/preloading-and-caching-assets/
but I'm using local images and I don't know what to do to make it work.
you can install new dependencies
npm install react-native-fast-image
and change Image into FastImage
for reference, you can visit this website:- https://www.npmjs.com/package/react-native-fast-image
this dependency will increase the loading of your Image
Asset Optimisation can also help you in expo. You can try the below commands to optimize assets in your project.
npm install -g sharp-cli
npx expo-optimize
Thanks!
Please consider following these steps:
First of all, we need to make sure that your images are not so big in size, because sometimes you find some applications (mostly photographic ones, kindly take a look at this link) are loading images with 2MB or even bigger, that's why they are slow, however the best image size range is between 100KB to 400KB.
Use one of the caching libraries to provide a performance boost in the loading time as such: react-native-progressive-fast-image or react-native-fast-image, be aware that these packages consume memory.
Please be cautious about inline styling and JSX callbacks, each re-render it will create another callback reference and another style Object (this is not very useful for your case but it will increase a little bit the JS thread FPS).
If you are using Image from react-native-elements, you have to set the transition property to false.
<Image
source={require('../assets/images/iconT.jpg')}
transition={false}
/>
I am working on a Custom Font in the React Native Project. (RN 0.61.2)
Already Setup react-native link.
Font File and react-native.config.js is under project folder like screenshot.
and config file, font family code is like this.
module.exports = {
assets: ['./assets/fonts/'],
};
<Text style={{fontFamily: 'NanumSquareRoundB', fontSize: 30}}>
Login
</Text>
The problem is that the font doesn't load when the app is first loaded or reloaded.
When I modify the font code, I can see the font applied.
So maybe I think there's an async problem, but I don't know how to do it.
I Changed only fontsize 30 to 31.
What's the problem?
to add a custom font for React-Native > 0.60
Android
Add your custom font files under android/app/src/main/assets/fonts ... and that's it.
You don't have to have react-native.config.js ... or execute a link command on your terminal.
IOS
Open your ios project <.xcworkspace> file in xCode.
Right click your project-name-node and select Add files to <your-project-name>, and add your font-files.
Make sure your font-files you added are listed under Build Phases > Copy Bundle Resources.
I want to show SVG icons but the thing I couldn't find the way to show. I tried to use Image and Use components of react-native-svg but they don't work with that. And I tried to do that with native way but it's really hard work to show just SVG icons.
Example code:
<Svg width="80" height="80">
<Image href={require('./svg/1f604.svg')} />
</Svg>
Initially, I had the same problem when I had SVG icons in my machine or saved in web URL.
I explored the react-native-svg library, but it does not allow you to include source of SVG icon already created. We can only create new icons using that library.
Later I found react-native-svg-uri which does allow us to use a given path to the icon.
You can use it like this:
import SvgUri from 'react-native-svg-uri';
<SvgUri
width="200"
height="200"
source={{uri:'http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg'}}
/>