I'm trying the app https://gist.github.com/ebidel/1ba71473d687d0567bd3 to load a screen loader until the app is loaded but all my images not loaded properly or not at all , and some styles are mess "styles of polymer elements"
I think this is because the loading just after the html imports in line https://gist.github.com/ebidel/1ba71473d687d0567bd3#file-app-js-L37 .
if it's true how to work around and if it's some thing else I appreciate your help
Related
I hope this question is not completely stupid. I am currently building a website using only plain HTML in Webpack. When I try to load images as usual, using the img tag and the src attribute, my images are not displayed. I found this in the webpack documentation. But there it only describes how I load images via JavaScript.
webpack Documentation
For all those who have a similar problem. You must first load the html-loader to be able to load images in your HTML files.
You need to specify image urls as described in the documentation. Then, Webpack will bundle everything together, place your images in the output folder and generate the final URL.
Now, when you import MyImage from './my-image.png', that image will be
processed and added to your output directory and the MyImage variable
will contain the final URL of that image after processing.
Webpack uses JS to process all the files, however JS may not be needed to load the images on the page.
I am new to using reactjs. I have an html file where i am trying to enter a react component . The react is described in two files: index.js which is "importing" a main.js file.
i want to have those components in my webpage. Can anyone tell me how can i do it ?
I tried using a script in my html file :
script src="index.js"
but it is not working.
I am totally new to this .
Reactjs is a group of components which bundled together to make a single page app.
I suggest reading the documentation of Reactjs
React js library is used to build a single page application. And it is a component-based library. You write your components and then render them into a single HTML div tag.
You should start your react journey with create-react-app boilerplate (https://reactjs.org/docs/create-a-new-react-app.html#create-react-app).
I had an old php site using a theme I bought, which uses the cubeportfolio 4.1 image gallery... see plugin: here and here.
I am rebuilding the site as a static site with gatsby, and have had to rebuild the gallery component by:
moving all the static assets (css, js etc) into my /static gatsby folder
hardwiring all the necessary js and css links as into my html.jsx file
fetching my image assets from graphql and rebuilding the gallery with very basic react components
Amazingly it works, and the cubeportfolio image gallery populates and resizes all the images into a perfect grid. Mouseovers etc also work.
problem:
when I navigate away, and come back to the home page (i.e. change routes), the cubeportfolio grid doesn't redraw itself! The image assets are just dumped on the page and nothing kicks in to shuffle them into a grid of appropriately resized elements. So, all i know at this point is that there is a bit of javascript somewhere that should be re-triggered, but isn't.
Googling, I found a snippet and tried adding the following to gatsby-browser.js:
exports.onRouteUpdate = () => {
// force cubeportfolio to redraw
$(window).trigger('resize.cbp');
}
This did not work. Any help appreciated.
OK figured it out. I found the code the old theme was using to set up cubeportfolio. It was in one of the static js files, so I think it was loaded once at startup and then subsequent returns to the page with the gallery didn't necessarily reload the js file.
Fix was to lift that code and move it to gatsby-browser.js:
exports.onRouteUpdate = ({location}) => {
// force cubeportfolio to redraw
if (location.pathname === '/') { // or path to whatever page has cubeportfolio
$('#grid-container').cubeportfolio({...}); // pass needed options
}
}
I am building an angular app and in one of the components i am trying to load an image, but it is throwing a 404 not found. I guess I am not giving my path correctly. Could someone please help me with it ?
my screenshot for the component structure and html code with it
My html page with the error:
copy your images into assets folder. Angular can only statics files like images from assets folder and then
<img src="assets\img\elliot.jpg">
I have been searching the forum for answers and similar posts, but none have helped me resolve my issue.
I am working on a standalone project - no server involved. And am trying to load a html file present inside a jar file into a JavaFX Webview using a code similar to the following
webView.getEngine()
.load(this.getClass().getResource("htmlInsideJar.html").toExternalForm());
The page loads into the webView, but the associated JS and CSS files are not loading into the HTML page.
However the HTML page loads just fine with all associated css and js files when loaded directly from disk
webView.getEngine()
.load("htmlFromDiskDirectly.html").toString());
I am using same file-folder structure for files with html, css and js contents.
The java version that I am using is as follows
java version "1.8.0_121"
Java(TM) SE Runtime Environment (build 1.8.0_121-b13)
Java HotSpot(TM) Client VM (build 25.121-b13, mixed mode)
Any help would be deeply appreciated please.
Thanks
I failed to get a solution, so i resorted to having the assets folder outside the jar.
// i set the html base tag with this
String BASE_URL = Paths.get("").toUri().toString();
String pageContent = ReadFileToString.read("page.html").replace("{BASE_URL}", BASE_URL);
in the html file i have something like this
<base href="{BASE_URL}">
<link rel="stylesheet" href="assets/style.css">
NB. the ReadFileToString.read() is just a custom util that reads a html file and returns it in string format.
I have found a fix to this issue. I am using requireJs to load my scripts into the html page. While the page loaded perfectly fine in
IE
firefox
chrome
and even in eclipse's inbuilt web browser
the JavaFX web engine precisely caught few errors where I had mis-spelt a file dependency in a require statement.
I had used some thing like require(['../abcModule/FileDependecy'] .... instead of require(['../abcModule/fileDependecy']. Changing a couple of such stuffs fixed the issue and the page loaded successfully. Had to spend 3 + hours to find a fix for it. grrr –
Thanks to fire-bug lite. Though it does not load neatly inside the JavaFx webview, I was able to mine the error info from the coarse data that appeared to get the issue fixed.
Hope this helps some one