I am using react-native for windows UWP. I don't understand how to load local raster image assets I want to package with the application. I am currently placing my image files in windows/foobar/Assets/ (where foobar is the name of the application). My initial assumption was that I could simply require them in the source like this:
<Image style={{ width: 50, height: 50}} uri={require('./windows/foobar/Assets/energy.png')} />
This works for svg files but errors for raster files saying it was unable to define the module. That makes sense since require is for loading modules and raster files are definitely not that. VS Code tries to help me understand this by not auto completing any raster files under Assets/.
However I've seen some examples online state I can do:
source={require('#expo/snack-static/react-native-logo.png')}
I don't understand why this format could work but the local path would fail.
I've seen other examples stating I should use:
uri={require('ms-appx:///ReactAssets/energy.png')}
But this does not resolve.
Ultimately I assume I need to tell react-native for windows about the assets I want to include in my app so they can be resolved through some kind of resource bundle, but I'm not finding any documentation on how to accomplish this. What do I do?
The discussion on this github issue is a little confusing to follow but eventually got me to the right answer.
Put your image under windows\\{yourprojectname}\Image
Open the windows solution in Visual Studio at windows\\{yourprojectname}.sln
In solution explorer, at the top, click on 'show all files'.
Expand the project for your Universal Windows app, find the Images folder, right click your image file and select 'Include in project'. Save all files.
Restart react-native
You can now refer to your images with:
<Image source={{ uri: "ms-appx:///Image/yourimage.png"}}/>
Related
I am a bit new to Vue.js. I am doing a social media application that allows users to upload and share images with others. I store my images in src/assets folder during development. However, when I build the project, all images are put in the dist folder. Therefore, what can I do to enable users to still upload images on production? Do I create the assets directory in the dist folder?
I have since tried different ways, including storing images on the backend. In dooing this, I reference the backend path relatively, using, for example, ../../../backend/public/assets..., and it works on development. However, when I build, the images that existed in the backend directory at the time of building are visible, however, whenever I try uploading more on production to the ../../../backend/public/assets... directory, they are uploaded successfully but are not visible (that is on production). I get an error that Cannot find module './image_name.image_extension'.
What am I doing wrong?
I have seen similar questions like this but there was no answer.
You must set your public path and change your way!!
first step to do is creating vue.config.js in your root directory, if you want to know more details, read this: https://cli.vuejs.org/config/
for example, I define prefix path for my files:
module.exports = {
publicPath:
process.env.NODE_ENV === "production" ? "/" : "/",
};
remember, It's better if you use "#" to define your paths.
for example, if you want to load a image which located in src/assets/files/img/myImage.png, you can use #/assets/files/img/myImage.png in template section for binding or script section of your .vue files!
It always help you to find correct path of your files.
and finally your way is not standard because "src/assets/..." will used for compiled scripts and styles and also your files which you want to use on your UI layout like static images. so you have to use "public/assets/..." directory to save your file, then you will see everything is going well for you.
if you have a more question or stuck solving this problem again, I'm here to fix your issues.
I recently started to integrate react native in an already existing android app. I have tried multiple image loading styles as mentioned on the page https://facebook.github.io/react-native/docs/images.html
Method 1(Hybrid Apps): For android use <Image source={{uri: 'asset:/app_icon.png'}} style={{width: 40, height: 40}} />
This method doesn't load anything on the app, just a 40X40 empty area is loaded.
Method 2: <Image source={require('./my-icon.png')} />
I used the absolute path to the image app/res/drawable-hdpi/image.png but it didn't work either.
Got the error
Unable to resolve module `../app/res/drawable-hdpi/image.png` from
`/Users/MyName/StudioProjects/reatProject/android/react-native/index.js`: could not resolve
`/Users/MyName/StudioProjects/reatProject/android/app/res/drawable-hdpi/image.png' as a file nor as a folder
I always provide height and width attributes in style map.
My project structure is
android/
app/
res/
src/
tests/
react-native/
index.js
package.json
package.lock.json
tests/
build.gradle
The project build.gradle file has the maven repository included as maven { url "$rootDir/react-native/node_modules/react-native/android" }
I had posted this as an issue on react native github issues, but got no solution there, so asking here if anyone has been through the same issue. I am fairly new to react native so maybe I am doing something wrong.
I had ended up making a mistake. The image source has to be of the form {{uri:"name"}} and I kept writing {{uri:"name.png"}}. It doesn't accept png in this scheme, but in the asset:// and the require scheme, it does. Its just a bit confusing.
For anyone facing the same issue, the same directory structure would work, just use image this way, and avoid using the extension.
<Image source={{uri:"imageName"}} style={{height:100, width:100}}/>
I have a project using react-native. When ready to upgrade the js bundle file, I come across a problem: In this upgrading, I need add some image resouce, so I have to copy the dest file to the src/main/res/ folder and regenerate the project. It's seem not so 'dynamically'.The second way is encoding the image resource using base64; it's work but ugly，especially there are lots of images. Certainly I could use network Images as react-native document describes, but it's 'expensively'. So is another way that loading new static images and needn't regenerate the project?
<Image source={require('./intro.png')} />
You can require images just like you require js files.
In the above example intro.png would be in the same folder as the js file.
Hope that helps
I tried everything and my android app icon doesn't work, can anybody help me?
y tried create a new project and paste just the app folder and it still the same.
I'm using the 3.5.1 Titanium SDK.
thanks for the help!
Agree with #Ashish. You need to put the icons in the
platform / android / res
folder. Under this folder I have a number of folders with an image named "appicon.png" in each of them:
drawable-hdpi
drawable-ldpi
drawable-mdpi
drawable-xhdpi
drawable-xxhdpi
drawable-xxxhdpi
I use ticons by Fokke Zandbergen to generate the icons. Works like a charm :-)
On that page you can also find a link to a description about Androids 9-patch images (that you will need for different background images to scale correctly). One quick note on the splash and background images. I have put them in
app / assets / android / images / res-long-port-hdpi (and other resolutions)
And that also works well.
/John
Try to add the respective resolution appcions to the below folder structure and clean and build.
Platform ---> android ---> res
In the res folder there are resolution specific folders where you can place your appicons.
did you every try this :
open you object using titanium studio
open tiapp.xml and chose Overview tag
click Browse and choose a picture in Application icon option
build you project
While you add the appicon.png in the image folders, make sure that you are also adding in the folder:
app -> platform -> android -> res -> (hdpi folder)
Otherwise, it shows the default titanium app-icon.
I'm new to resources with coding. I just want to create a standalone exe that has a couple of png images bundled inside of it.
Is there a way to do this? I have tried setting the build action of the images to embedded resource but when the program is compiled there seems to be no exe at all. I'm sure there's a simple way that this is done.
Use My.Resources. Don't add the image files to the project in the Solution Explorer yourself. Open the project properties and add the files on the Resources page. If you add Image1.png and Image2.png then you can access them in code using My.Resources.Image1 and My.Resources.Image2. You don't have to do anything extra.