What work-arounds are available for this aside from updating the assets import in the angular.json file and adding an images folder in the assets directory?
I'm aware that there are a number of posts around this. And I have solved the issue in my app. But it seems that you cannot access a favicon reliably from the src folder in an Angular app. In adding an images folder to the assets directory in the app, and accessing an icon or graphic from there...the app loads the app icon every time.
My current working solution:
Add an images folder to the ./assets directory in your app. Place the image/icon in this folder and access it from there.
Google favicon generator and make an icon. Name it favicon.ico and drop it in your webroot.
See if this helps.
Also here is a tutorial on favicon: https://www.w3.org/2005/10/howto-favicon
Related
My attempts at making an IO game is failing, as I can't dynamically load images after I have packed the game using WebPack (a hypothesis). When I lazy load any assets whether it be cross origin or local, it doesn't seem to load and render.
in index.js I have this in phaser's create():
this.load.image('arc_red', 'https://art.pixilart.com/187aec08b8014f7.gif');//testing with this
this.load.once('complete', ()=>{console.log('image loaded!')}, this);
this.load.start();
when I use the preload, it does work. But dynamically it does not. I've been searching for nearly a day straight without any luck.
question:
Is my assumption correct? And if it is, what is a way I can dynamically load images after WebPack has packed the files?
I'm no webpack expert (and depending on the webpack version), but if you are not using a webpack.config, the default behavior is that there should be:
webpack bundle files are placed into the ./dist folder. So to answer your question, any file that is not in this folder is not bundled with webpack
Except if they are "inlined" in the main.js, I think images are not be inlined automatically/without plugin, or atleast in the version I used to use.
dev-server offers an extra folder, where "static" files can be placed, it is ./public(https://webpack.js.org/configuration/dev-server/)
So all files that are served from the dev-server must be in on of those folders.
I would place the images/assets into that ./public folder, and than they should be visible.
Info: I tripped over this once, files placed in ./public folder are accessed, as if they would be in the ./dist folder.
I want to dockerize my vue app, but when I run it in a docker container nothing is loaded in the browser.
Since I run CMD["http-server", "dist"] in my Dockerfile, I decided to test it out locally to troubleshoot the issue.
Running:
npm run serve
Works fine and I get:
Then I run
npm run build
I believe this is due to having a posters folder with 50,000+ jpeg images in the assets directory which I dynamically display in the app as follows:
<div v-for="movie in this.recommendations" :key="movie" class="movie-card col-md-2">
<img v-if="movie['poster']=='True'" :src="getImgUrl(movie['movieId'])" v-bind:alt="pic">
And the getImgUrl function is:
getImgUrl(imgName) {
var images = require.context('../assets/posters', false, /\.jpg$/)
return images('./' + imgName + ".jpg")
}
vue/cli suggests
webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
but I'm not sure how to implement either one of these or
if hosting the images on a public google drive and importing them from there would solve the issue?
Pretty new to vue so any help would be much appreciated!
By using the assets folder and using require you are bundling all of your images into your code, by encoding them as base64. So when it is compiled it is creating GIANT chunks. Because the images are compiled into the source.
What you should do is move your images from assets to the public directory. Then load the images via HTTP. This means that your code and images remain separate. When the page loads, the browser requests the images separately from your code, and loads them into the file.
For example
<img v-if="movie['poster']=='True'" :src="getImgUrl(movie['movieId'])" v-bind:alt="pic">
getImgUrl(imgName) {
return `/posters/${imgName}.jpg`
}
Thus your directory structure would become
-public
-|--posters
-|--|--Poster1.jpg
-|--|--Poster2.jpg
-|--|--Poster3.jpg
-|--|--Poster4.jpg
etc
The public directory overly simplified acts as a webserver. Anything that is in it can be accessed directly. For example, if you were to move your images over, to the public directory, with the directory structure above, and access localhost:8080/posters/Poster1.jpg, it would load just the image, without even needing a Vue router.
For a better, in-depth description of the public folder, and the role it serves check out the docs.
I want to integrate TradingView's charting library in my Laravel project.
I have copied the charting_library folder to the Public folder of Laravel.
After that, I have referenced the charting_library.min.js file from Blade files in view and the other resources related to it.
<script type="text/javascript" src="{{ asset('tradingview/charting_library/charting_library.min.js') }}">
All js files loads successfully, but the problem is that this charting_library.min.js calls an HTML file from a subdirectory where it returns a 404 Not Found error.
http://localhost:8000/charting_library/static/fa-tv-chart.37***ee.html 404 (Not Found)
Here is the file/folder structure:
I have checked loaded resources from chrome's dev tools.
Laravel loads these referenced JS files, but it doesn't load any other files which these files have requested and just returns 404.
The charting_library folder exists in the directory, it's just something related to Laravel. I think it can't see the directory's contents.
I have tried to modify the .htaccess file but still no luck.
I even tried to mix charting_library.min.js via Webpack, changing autoload, but still, nothing happens.
I solved this issue by:
Moving the project to wamp's www folder.
Moving charting_library and datafeeds folder to the root of laravel's public. It seems
tradingview's widget constructor uses relative path's for building
whole chart. So when you place the charting_library inside a folder,
it doesn't resolve other assets. These folders should be exactly in
the root.
I got an EAR file, I try to deploy and It deploys fine, without error. The problem is the following:
All the ccs files, images, files, etc are using absolute paths in the HTML files, (the HTML files are being generated through an external program so change to relative paths is not an option), so the styles are not being loaded, the links to other pages don't work, etc.
An example to clarity:
I have the ear deployed in "localhost:8080/app, the index.html file loads but inside the file, I try to use the link to the page2.html, and the path is localhost:8080/page2.html instead "localhost:8080/app/page2.html".
The browser says "the page cannot be loaded"
How can I fix this without change the paths to relative? I have the context root of application.xml with "app" and the welcome file of web.xml inside the war file with "index.html".
the structure is the following:
file.ear
meta-inf
file.war
web-inf
index.html
css folder
pageX.html
I beg for help.
Thanks in advance.
First you need to know understand, how file system works in web.
<link rel="stylesheet" href="slick.css"> // file present in same folder
<link rel="stylesheet" href="css/slick-theme.css"> // file present in css folder of current folder
<link rel="stylesheet" href="/css/slick-theme.css"> // file present in the css folder at the root directory of the current web
<link rel="stylesheet" href="../slick-theme.css"> // file present at one level up the current folder
Since all your files path starts with /, server tries to find it relative to the root directory.
All you need is to deploy your app as root app without any context-root.
This will require 2 things:
1)
<context-root>/</context-root>
2) configuration change at server level, remove default content mapping, try to find
<location name="/" handler="welcome-content"/>
(may vary in your jboss version) and comment it.
Attaching screenshot of your working app:
PS: Delete your EAR from repo or make it private
Deploy your app as ROOT.war
You might also need to tweak your server config to allow this if you keep seeing the server welcome page
If you can't bind the app to / and you can't change the file paths referenced in the app, then the only option would be to use a proxy infront of the sever, something like nginx, so you make the requests to the proxy and it passes the request on to http://appserver/app/
How can I create a widget with its own images to use in any project? I created an "images" folder inside the widget project and now I want to get the path without changing it on every project.
The structure is: ../widgets/WidgetFolderName/images/foo.png
I tried WPATH('images/foo.png') but didn't work.
As you can see in Alloy_Widgets documentation, it searches on the assets folder or the lib folder.
Create the assets folder on the root and move there my images folder and leave unchanged the WPATH path.