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
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 am building an app , my app contains a folder called content that folder contains a menu.html file that is calling some js, css files
content (size 5 MG)
menu.html
css
js
images
my problem is that after having generated my apk , installed it on my mobile
it displays first screen , when i click to move to next screen (the screen that is calling menu.html) here it sucks , i get a simple empty screen !
my question should I import manually this content folder to my android assets folder ? should I remove the 2 existing files in assets index.android.bundle and index.android.bundle.meta ?
You could try linking it. Since rnpm is part of RN you don't need to install anything, just add an entry in your package.json
"rnpm": {
"assets": [
"./path/to/file.html"
]
}
and then run react-native link
If you're already using rnpm you can add another path separated by a comma to that assets array. I don't know for certain but I would imagine the react-native is going to by default ignore HTML files unless they are explicitly linked.
You could also manually store the file in your Android assets folder and require it from there, but this won't work for iOS so if you're going cross platform I would try to get it to work via link.
Also as a side note, WebView kind of sucks. For a better user experience I would suggest rewriting the contents of that file in a way that react-native can render them.
There are plenty of tutorials on including font assets using rnpm. These are the steps:
Put fonts in, say, ./assets/fonts
Add the following snippet to package.json:
"rnpm": {
"assets": [
"./assets/fonts",
]
}
run react-native link.
Works well for font assets, but what about other types? I need to include a text file, but repeating the above steps for text file assets does not seem to have any effect. What am I missing? There are no mentions on the internet, so I'm not even sure this is possible at all with rnpm.
EDIT: To be more specific, I added a file.txt to the ./assets/raw directory and added ./assets/raw next to ./assets/fonts in the rnpm config in package.json. After running react-native link I expected file.txt to appear in the Android project assets directory (/android/app/src/main/assets), and in the "Copy Bundle Resources" build phase in iOS project, but it didn't happen. react-native link ran normally and produced no errors.
My ultimate goal is to include a text file in the app bundle and have it accessible at runtime. Another option would be to wrap the text in JSON, but that way it ends up in JS bundle increasing its size by ~25%, which is probably not good. Some also recommend react-native-fs to read the file, but I'm not sure where to put it so that it's available for both Android and iOS. rnpm knows where to put assets for Android and iOS (and how to copy them to bundle), so using it seems to be the way to go, but I can't make it work with text assets.
Any thoughts or suggestions?
After digging around in the React Native CLI I found out that react-native link, handles only fonts. Here's the relevant piece of code from /node_modules/react-native/local-cli/link/android/copyAssets.js:
/**
* Copies each file from an array of assets provided to targetPath directory
*
* For now, the only types of files that are handled are:
* - Fonts (otf, ttf) - copied to targetPath/fonts under original name
*/
module.exports = function copyAssetsAndroid(files, targetPath) {
const assets = groupFilesByType(files);
(assets.font || []).forEach(asset =>
fs.copySync(asset, path.join(targetPath, 'fonts', path.basename(asset)))
);
};
As you can see, groupFilesByType groups all files by their MIME type (font, text, etc.), but then only fonts are actually copied to the project.
Others ran into this issue before. There was a pull request adding support for video assets, but it was not merged. Apparently the way to go is to use packager.
I would like to know how to change the default index.html file. I have created a classic project (for mobile web). In that I have created a .css file which includes my custom styles. Now I would like to include this file in index.html, so that those styles will apply on my application. But haven't seen the index.html file. After build, I am able to see this file in build folder. May I know how to update the index.html file?
Thanks in Advance,
Swathi.
Appcelerator uses XML for views, TSS for styling, and JS for controllers. Then Titanium compiles your source code into the native API (HTML for mobile web). Because you can also compile for iOS, Android, and Windows, your output is converted appropriately to your build directory. When you create a new Alloy project, you will find the default index.xml, index.tss, and index.js in the app views, styles, and controllers directories respectively. So to control index.html, edit these 3 index.* files.
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.