I'm want to bundle and load local html with assets with in expo managed app.
I just created blank TS project and installed react-native-webview. WebView is loading external sites well.
I added index.html and some assets to assetsfolder. It seems that currently Expo/RN dosn't support loading html with require (at list I didn't find how to solve it. So I push HTML code to WebView.
const html = `<image src="assets/splash.png" height="128" width="128"></image>`
return(
<WebView source={{ html: html }}
/>
)
But I see nothing (blank placeholder for image). I tried different paths for instead of assets/splash.png, but nothing seem to work. I don't get how to make HTML load assets that are in assets folder? Or I should place it somewhere else?
Related
When I use the #vue/cli to create a vuejs project, I see that there is a folder /assets that contains images and whatever I want. Than they can be referenced in the html such as <img src="#/assets/images/home.png" /> or import it on the js part.
My question is, why can't I just put the assets in /public/assets and put directly <img src="/assets/images/home.png" /> in my code? Where is the advantage of these assets?
It allows Webpack to handle assets, which means it can merge/minify files (useful for JS and CSS), optimize images, and more importantly version them so that cache handling is improved.
I have a project where I have placed the external js files like jquery, datepicker etc in the 'static' folder. I am importing them in the index.html file.
It is getting picked correctly when the page is directly loaded. But when navigating to the page using $this.router.push('/dashboard') the javascript does not get picked up.
Not sure if I am missing something here
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've a problem with local image. My react native version is 0.14.2.
I have a file index.android.js in my repository App with this code :
<Image source={require('./house.png')} style={styles.image}/>
It works if I put my image in App and in App/assets. If I just put my image in App, it doesn't work.
Then, I want write my code like this :
<Image source={require('./img/house.png')} style={styles.image}/>
But, if I put my image in App/img, it doesn't work. Even if I add my image in App/assets/img, it doesn't work.
Images are loaded relative to your .js file. So if you have
require('./img/image.png')
In App/index.android.js, the image should be placed in App/img/image.png.
There's no special assets/ folder.