I am trying to get Lottie to play from a zip file. Playing from a zip file is referenced in the documentation but I can't find an example of how to implement it. Below is my code. In the zip file is the data.json file along with the required images folder which contains all the .png used.
lottie.loadAnimation({
container: document.getElementById("goHere"),
renderer: 'svg',
loop: true,
autoplay: true,
path: 'animation.zip' // the path to the animation json
});
That documentation is related to the android player.
https://airbnb.io/lottie/#/android?id=zip-file
Unfortunately, the web player doesn't have this feature.
Related
I'm trying to use the <Image> component in a Next.js project that references an external domain. I'm just working locally.
I'm instructed to add images.domains to my next.config.js file but that doesn't seem to work.
https://nextjs.org/docs/messages/next-image-unconfigured-host
next.config.js
module.exports = {
images: {
domains: ['placehold.it'],
},
webpack: (config) => {
config.module.rules.push({
test: /\.svg$/,
use: ['#svgr/webpack'],
});
return config;
},
};
My image:
<Image
width={400}
height={300}
src="http://placehold.it/400x300"
/>
Am I missing something?
You have to set a loader function.
From a quick view of the code, a domain seems to be correctly specified, but the image source simply has the domain + image size.
Does the stored image actually have a file name that needs to be included?
Obviously, if the images are stored just tagged by size, it's possible that a missing file type (e.g. jpg) is required.
If an image placeholder is appearing on the page, right click to inspect the element or right click to copy the image address and paste it somewhere to inspect the entire path and check to see if it makes sense.
A loader is required if using a service such as Cloudinary. Use of a loader complicates (prevents?) using local images but I don't know how it might impact simply getting remote images.
I am working on a Meteor project where I need to generate a PDF export of a section from the page.
I use webshot to generate the export.
A recent requirement is to use a public static asset - a logo image - in the export.
I worked around making css assets available to phantomjs by reading all the css files and copying their content into style tags in the HTML doc I let webshot consume. That works fine.
For the images, I replace the "./images/" pattern in the HTML with the full path to the images folder on the server using
const buildPath = path.resolve('.').split(path.sep + 'server')[0];
const imagePath = buildPath + '/web.browser/app/images/';
which runs on the server. The image doesn't show up.
When I open the generated HTML (I save it for debugging) at any place on my dev machine, the image path is resolved fine, and I get the image.
What is the right way to access those static assets in phantomjs?
I figured that out - I was missing a fully qualified protocol in the src attribute of the img tag. While Chrome is smart and forgiving, phantomjs is not.
So basically I had to add 'file:///' before the full path to the image.
It now looks like:
const buildPath = path.resolve('.').split(path.sep + 'server')[0].replace(/\\/g, '/');
const imagePath = buildPath + '/web.browser/app/images/';
html = html.replace(/src="\.\/images\//g, 'src="file:///' + imagePath);
And as for the comment regarding time, I do give full 1 sec delay for rendering, but didn't check if it works without it.
I'm trying to create an app that loads a website and then adds some custom CSS to adjust it to a mobile device.
I'm using window.open to load the page successfully, and I have a callback on loadstop where I'm calling browser.insertCSS, this is where the problem is.
If I do something like this:
browser.insertCSS({code:"body{background-color:red;}");
The style is applied correctly. However if I do this:
browser.insertCSS({file:"mobile-style.css");
And add the same CSS to the file, it doesn't get loaded
I have tried different paths (putting the file in the www folder, in the css folder, in the same folder as the JS file, and referencing it with "./mobile-style.css", "mobile-style.css", "/www/mobile-style.css", "/mobile-style.css" but none of them seem to load the file correctly.
I saw another post What should file paths fed to insertCSS() be relative to? where this same question was asked, but there is no accepted answer (I have tried the suggestion there and it doesn't work).
Any help would be greatly appreciated.
Thanks
Will
you have to wait until your inAppBrowser page loading finishes.
You must add an event listener:
var inApp = window.open('mypage.html', '_blank', 'location=no');
inApp.addEventListener('loadstop', function(){
inApp.insertCSS({
file: 'inAppStyle.css'
},onSuccess);
});
EDITED
Use this path for your android projects file:///android_asset/{your folder}
INFO: https://github.com/apache/cordova-plugin-file/blob/master/doc/index.md#android-file-system-layout
I couldn't find the right local path. Instead, I just uploaded the css file to the web and provided a regular URL
file: 'http://mywebsite.com/path-if-needed/my.css'
Not ideal to have an external dependency, but not a big deal since InAppBrowser itself requires internet access.
I probably know why it won't work, it is because your path isn't right, this css file should not put in www folder, neither the cordova project folder, u should put it into the server, for example, if ur browser is to visit http://192.168.1.1/admin, then the cordova only fetch this file when the browser is under the 192.168.1.1/admin, it fetch the file under the server directory.I don't know if u use any debug tool , if u use one, it's easy to find out what went wrong, ur console will log the error which path it fetch the css file and didn't get it.
If you want to add an external CSS file stored locally in the APP's sandbox and not around in the Internet, this is the only way, that is, you get the external file, you store it into a string variable, and then you insert such code into the Browser.
var inAppBrowserRef = cordova.InAppBrowser.open(url, "_blank", "location=no");
//when load stops call loadedCallbackFunction
inAppBrowserRef.addEventListener('loadstop', loadedCallbackFunction);
function loadedCallbackFunction() {
console.log("InAppBrowser Window loaded");
$.ajax({
type: "GET",
url: cordova.file.applicationDirectory + "www/css/myExternalCSS.css",
dataType: "text",
success: function (CSScode) {
inAppBrowserRef.insertCSS(
{ code: JScode},
function(){
console.log("CSS code Inserted Succesfully into inApp Browser Window");
});
},
error: function () {
console.error("Ajax Error");
}
});
}
You need the cordova-plugin-inappbrowser
I am using Karma commercial template. I have make the plugin for to upload document or any type of file, which will save in database and give option of Preview in front end. I have search many plugins for the same. I don't want to download the file but only wanted to preview the file in read only mode.Please help for the same.
I have used javascript code using javascrip plugin:
var documentViewer = $('#document-preview').documentViewer();
But it is not usefull for word file as it is useful for image, pdf and text file.
The Google Document Embedder plugin allows you to display files (PDF, Word, etc.) and has options that will prevent downloads.
http://wordpress.org/plugins/google-document-embedder/
A simple issue but unable to find a solution.
I have some image files that I placed in a subfolder called icons in my working directory in my ASP.NET website. I want to set an image during initialization to the markers on my Google map. But this isn't working. I have tried-
var marker= new google.maps.Marker({icon:'E:\cdeez\Sites\googletest 5\icons\busballon.png', position:pos,map:map});
It gives an error:
Not allowed to load local resource: file:///E:/cdeezSitesgoogletest%205icons%08usballon.png
However there is no problem if I place the image in the working directory. I guess giving the absolute path is not the right way too. So what is the right way in the above case.(Just a reminder- the above code will be in the aspx file).
According to the MarkerOptions docs, the icon should be a URL. However local files (embedded with file:///) tend to be ignored by browsers if the website is served over http - and I think that is what is happening in your case.
I would suggest to try out the following steps:
try using a relative path, e.g icon: "/icons/busballon.png"
try using a http path to your file, e.g. icon: "http://yoursite.com/icons/busballon.png"