I have an Image Component that needs to be updated periodically after state change. The app works perfectly on Android but the images do not load on IOS. Also the links are in https and work perfectly on IOS normally, but after uri state change, the image area is blank. Also after the OnloadStart event, the onLoad event does not fire on IOS.
Image Component
<Image
source={{uri: this.state.uploadUrl}}
style = {{resizeMode:'stretch',width:'auto',height:125,marginTop:50,marginBottom:15}}
onLoad={() => {
alert('loaded image! ')
}}
onLoadStart={() => {
alert('load starting: ' + this.state.uploadUrl)
}}
/>
State Change
this.setState({isTrying:false,uploadUrl: responseJson.data.uploadUrl,adUrl : responseJson.data.adUrl});
Related
In app.js:
import iconSet from 'quasar/icon-set/fontawesome-v6'
import '#quasar/extras/fontawesome-v6/fontawesome-v6.css'
and:
setup({el, app, props, plugin}) {
return createApp({render: () => h(app, props)})
.use(plugin)
.use(ZiggyVue, Ziggy)
.use(PrimeVue)
.use(Quasar,{iconSet: iconSet,})
.mount(el);
},
In template:
<q-btn color="yellow" glossy text-color="black" push label="First" icon="fabAngular"/>
The icon prop is not woking, it writes the name of icon instead of rendering it.
Anyone any idea what I am doing wrong?
I have tried it with different icon sets, but neither seems working. Icons are not rendering, only their names is written out.
I'm trying to display image from public folder of my node api directory. I want to display image in front end vue file. I don't know how to give source of image.
This is the directory. I want to display image nodelogin.png
I want to display these images.
<img :src="myimage" alt="Logo" width="80" height="80" />
This is my template code.
async created() {
this.myimage = await this.getImage();
},
methods: {
async getImage(){
return await 'http://localhost:4000/api/public/nodelogin.png';
}
}
But this code gives an error response.
Cannot GET /api/public/nodelogin.png
Actually I'm new to node and Vue So I'm not sure whether my logic is correct or not.
Do I need to do something from my backend side?
Just use the url '/nodelogin.png'
Thanks for your question posting.
If you want see png, you should input url :
http://localhost:4000/nodelogin.png
Good luck for your business.
local files are not loading in ios, in android its working fine, using,
react-native-webview version 5.0.1
<WebView
source={{ uri: 'ICF-Package/ICFPackage/index.html'}}
ref={(webView) => this.webView = webView}
originWhitelist={'["*"]'}
javaScriptEnabled={true}
domStorageEnabled={true}
scrollEnabled={false}
onLoad={() => this.sendPostMessage()}
allowFileAccess={true}
allowUniversalAccessFromFileURLs={true}
allowFileAccessFromFileURLs={true}
useWebKit={true}
/>
try using this
Loading local file
const FileHTML = require('./Index.html');
<WebView
source={FileHTML}
style={{flex: 1}}
/>
you can write like
<WebView source={{ html: HTML, baseUrl: 'web/' }} />
This code is working for me android ios
import {Platform, WebView} from 'react-native';
<WebView
source={Platform.OS === 'ios' ?
require('../src/assets/your.html') :
{uri: 'file:///android_asset/your.html'}
}
domStorageEnabled
javaScriptEnabled
/>
In ios for local files to be accessed, you need to include them in the Copy Bundle Resources section in XCode.
Click on you project name in the Xcode's left pane.
In the center pane, select your app target
Click on Build Phases tab on top
Scroll to Copy Bundle Resources section and click +
Find your file in the list. If not found Click on Add other option and locate it.
Then in your code change source prop of webview as:
source={{ uri: 'ICF-Package/ICFPackage/index.html', baseUrl: './'}}
Hope this helps
This is a unique question: I don't want to use browser javascript to solve this, please read on...
I want to convert <img src="..."> to Base64 img tag by compiling the app (ng build or ng serve), to make the image load instantly - without further downloads other than the app itself, but also to make the image dynamicly changable while developing the app.
For example, here's a component - home.component.html:
code before compiling (notice the base64 directive, its just an idea though):
<img src="assets/images/phone.png" base64>
code wanted after compiling:
<img src="data:image/png;base64,iVBORw0......rest-of-base-64-goes-here">
Important: This should happen without running a front-end javascript operation by the user, or by calling the image file. (by means, the file phone.png will not even exist when compiling)
I still want to edit the local image phone.png while developing.
I know I can convert the file to base64 manually and update it in my component, but that's exactly what I don't want to do - I want it to happen automatically to save time.
That means the image will sit in the component itself, in one of the .js files that has been compiled, and therefore will load instantly with the app.
Idea: It would be nice and easy to have a directive that would take care of that.
something like <img src="phone.png base64>**
I assume it can be done using node/webpack in some way, but I have not idea how.
You need to use readAsDataUrl()
function getBase64(event) {
let me = this;
let file = event.target.files[0];
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
//me.modelvalue = reader.result;
console.log(reader.result);
};
reader.onerror = function (error) {
console.log('Error: ', error);
};
}
Hope can help you..
I am developing a phone gap application and we've recently added support for the windows 8.1 platform. The application downloads/creates files which are saved to the device using the Cordova FileSystem API.
I have successfully saved a file to the device using a URL which looks like this
ms-appdata:///local/file.png
I have checked on my PC and the file is viewable inside the LocalState folder under the app's root folder. However, when I try to open this file using inAppBrowser nothing happens; no error message is being reported and none of the inAppBrowser default events fire.
function empty() { alert('here'); } //never fires
var absoluteUrl = "ms-appdata:///local/file.png";
cordova.InAppBrowser.open(absoluteURL, "_blank", "location=no", { loadstart: empty, loadstop: empty, loaderror: empty });
I have verified that the url is valid by calling the following built-in javascript on the url
Windows.Storage.StorageFile.getFileFromApplicationUriAsync(uri).done(function (file) {
debugger; //the file object contains the correct path to the file; C:\...etc.
});
Also, adding the url as the src for an img tag works as expected.
I have also tried attaching the inAppBrowser handlers using addEventListener("loadstart") etc. but none of them are firing either. However, when I try to open "http://www.google.com" the events do fire and the inAppBrowser pops up on the screen.
After inspecting the dom I can see that the inAppBrowser element has been added, but it doesn't appear to have a source attribute set
<div class="inAppBrowserWrap">
<x-ms-webview style="border-width: 0px; width: 100%; height: 100%;"></x-ms-webview>
</div>
I have looked at other questions such as this one but to no avail. I have verified that
a) InAppBrowser is installed
b) deviceReady has fired
I have also tried changing the target to "_self" (same issue) and "_system" (popup saying you need a new app to open a file of type msappdata://) and I'm running out of ideas. Has anybody come across similar issues?
I had a similar problem. My cordova app downloads a file and then opens it with native browser (so that images, PDF files and so on are properly handled).
In the end I had to modify InAppBrowserProxy.js class (part of InAppBrowser plugin for Windows platform).
This is the code that opens the file (plain JavaScript):
// This value comes from somewhere, I write it here as an example
var path = 'ms-appdata:///local//myfile.jpg';
// Open file in InAppBrowser
window.open(path, '_system', 'location=no');
Then, I updated InAppBrowserProxy.js file (under platforms\windows\www\plugins\cordova-plugin-inappbrowser\src\windows). I replaced this code fragment:
if (target === "_system") {
url = new Windows.Foundation.Uri(strUrl);
Windows.System.Launcher.launchUriAsync(url);
}
By this:
if (target === "_system") {
if (strUrl.indexOf('ms-appdata:///local//') == 0) {
var fileName = decodeURI(strUrl.substr(String(strUrl).lastIndexOf("/") + 1));
var localFolder = Windows.Storage.ApplicationData.current.localFolder;
localFolder.getFileAsync(fileName).then(function (file) {
Windows.System.Launcher.launchFileAsync(file);
}, function (error) {
console.log("Error getting file '" + fileName + "': " + error);
});
} else {
url = new Windows.Foundation.Uri(strUrl);
Windows.System.Launcher.launchUriAsync(url);
}
}
This is a very ad-hoc hack, but it did the trick for me, and it could be improved, extended, and even standarized.
Anyway, there may be other ways to achieve this, it's just that this worked for me...
After more searching, it seems that the x-ms-webview, which is the underlying component used by PhoneGap for Windows only supports loading HTML content. This Microsoft blog post on the web view control states that
UnviewableContentIdentified – Is fired when a user navigates to
content other than a webpage. The WebView control is only capable of
displaying HTML content. It doesn’t support displaying standalone
images, downloading files, viewing Office documents, etc. This event
is fired so the app can decide how to handle the situation.
This article suggests looking at the Windows.Data.Pdf namespace for providing in-app support for reading PDFs.