I'm creating a React Native module along-side a React Native application. Everything with the module works as expected until I introduce images that should exist in the package and not in the application.
Any image from the package does not display in the consuming application.
(Option 1): Including image asset
const image = require('./assets/background.jpg');
const config = {
styleConfig: {
background: {
images: {
primary: image
},
...
}
export config;
If I include config in the consuming application, everything else works as expected (strings, components, etc) until I try to include <Image source={config.styleConfig.background.images.primary} /> (normally would get this info in a nicer format but for the sake of explanation showing the full path and not any of the abstractions). This does not throw an error but displays a blank image.
(Option 2): Including image component
Once it seemed like including the asset was not working, I created an Image component that used the required image directly and exported this. This also displayed a block the size of the image but did not show the asset. If I do this same operation but create the component and load the asset from the consuming application all is well.
Related
I am trying to dynamically load files in a WebView. I can use an ajax call out to fetch from a server but can not figure out how I would load the resources if they are in the assets folder.
DETAILS:
I am loading a three js scene from the local file system using:
<WebView source={{ uri: "file:///android_asset/test.html" }} />
I have maybe 10 local models in the asset folder and would like to load a specific model when the user selects it. How would this be done using a THREE js loader? If a loader cant be used, can I fetch the model and pass it into the loader manually?
Basically is it possible to have a webview access the local file system in react-native?
Try something like this
const localHtmls = [require('../htmls/test.html'),
require('../htmls/test2.html'), ...];
// Do your logic here to find the index
let theHtml = localHtmls[0];
<WebView
source={theHtml}
style={{flex: 1}}
/>
Make sure the path in require is correct.
I have Flutter app which needs to load dynamic assets and content which I want to save for later use. I know about Assets I can have in build time at the folder "assets/" inside the app.
I want to download content using ZIP files and unzip them to app local folder so they won't delete in the next app update.
what are the folders Flutter allows me to add assets to at runtime?
You cannot dynamically add assets to Flutter app at runtime and that is why Shared_Preferences package was developed by the official Flutter_Dev Team.
https://pub.dev/packages/shared_preferences
If you want to store a File instead of bits of information then refer to the below example code (For a Image File):
Future getImage(ImageSource imageSource) async {
// using your method of getting an image
final File image = await ImagePicker.pickImage(source: imageSource);
// getting a directory path for saving
final String path = await getApplicationDocumentsDirectory().path;
// copy the file to a new path
final File newImage = await image.copy('$path/image1.png');
setState(() {
_image = newImage;
});}
If your still want to somehow add/delete files dynamically then the answer is that it is practically not possible because assets weren't designed to dynamically store files.
One should only use assets to store files which shall remain common for all users.
I integrated the prismic.io headless cms into my vuetify project and have been able to render content from key text fields I created in my prismic repository into the project, but I haven't been able to load images. When I view the page in a browser I get the following console error:
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
found in
--->
at /Users/jbdebiasio/dev/prismic-vue/src/components/Image.vue
When I view the image with inspect element it shows the following markup:
<!--function (a, b, c, d) { return createElement(vm, a, b, c, d, true); }-->
What does this mean and what do I need to do to render images properly? I tried updating my app instance but observed no changes.
My company recently ran into the same issue, and it's because of the way the Prismic Vue package is built.
It's caused by Prismic not using render functions, and instead requires the template compiler to build their components at runtime.
You're going to need to add the full build of Vue, which includes the template compiler
The following example works if the project was made with the Vue CLI
// vue.config.js
module.exports = {
// Will merge all properties with the default web pack config
configureWebpack: {
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
}
}
}
}
More info on this here
Vue CLI config here here
This solution is obviously just a bandaid, and the real problem needs to be addressed by Prismic. See this pull request.
Nativescript Angular is well known for its code sharing properties. I am trying to simplify my design by using only 1 typescript file instead of splitting into the .ts and the .tns.ts file.
I was trying to import { Page } from "tns-core-modules/ui/page"; in the .ts. When running on Android, the code works flawlessly, but if I ng serve for the web app, it says Module not found: Error: Can't resolve 'tns-core-modules/ui/page'.
The reason why I wanted to import the page module is because of setting the action bar properties
constructor(private page: Page) {
if (isAndroid) {
console.log("This is Android");
this.page.actionBarHidden = true;
}
}
I was hoping to import the tns-core-modules/ui/page and some other tns-core-modules in the same file as the angular web app. Is it possible to do so? Or is it a must to split into the .ts and the .tns.ts files?
You have to go with platform specific ts files, one for web and one for tns, Page won't be valid while running inside a browser (ng serve).
If you prefer to reuse most of your code, try writting a common / base ts component, extend platform specific ts files from the common / base ts component, inject Page only within the tns specific ts file.
We are running 2 servers. Server 1 hosts a react application. Server 2 hosts a webcomponent exposed as a single javascript bundle along with some assets such as images. We are dynamically loading the webcomponent Javascript hosted on Server 2 in our react app hosted on Server 1. The fact that it is a webcomponent might or might not affect the issue.
What's happening is that the webcomponent makes uses of assets such as images that are located on Server 2. But when the react app loads the webcomponent, the images are not found as its looking for the images locally on Server 1.
We can fix this in many ways. I am looking for the simplest fix. Since Server 1 app and Server 2 apps are being developed by different teams both should be able to develop in the most natural way possible without making allowances for their app being potentially loaded by other apps.
The fixes that I could think of was:
Making use of absolute URLs to load assets - Need to know the deployed location in advance .
Adding a reverse proxy to Server 1 to redirect to Server 2 whenever a particular path is hit - Need to configure this. The React app could load hundreds of webcomponents, viz we need add a lot of reverse proxies.
Embed all assets into the single javascript on Server 2, like embed svgs into the javascript. - Too limiting. If the SVGs are huge and will make the bundle size bigger.
I was hoping to implement something like -
Since the react app knows where to hit Server 2, can't we write some clever javascript that will make the browser go to Server 2 whenever assets are requested by a Javascript loaded by Server 2.
If you download your Web Component via a classic script (<script> with default type="text/javascript") you can retrieve the URL of the loaded file by using document.currentScript.src.
If you download the file as a module script (<script> with type="module"), you can retrieve the URL by using import.meta.url.
Parse then the property to extract the base path to the Web Component.
Example of Web Component Javascript file:
( function ( path ) {
var base = path.slice( 0, path.lastIndexOf( '/' ) )
customElements.define( 'my-comp', class extends HTMLElement {
constructor() {
super()
this.attachShadow( { mode: 'open' } )
.innerHTML = `<img src="${base}/image.png">`
}
} )
} ) ( document.currentScript ? document.currentScript.src : import.meta.url )
How about uploading all required assets to a 3rd location, or maybe an AWS S3 bucket, Google Drive, Dropbox etc.? That way those assets always have a unique, known URL, and both teams can access them independently. As long as the names remain the same, so will the URLs.