First; I saw similar questions, however, they don't contain a valid solution for me, tried all of them and they were not working.
The thing I want to achieve is really simple, I just want to put a background image in CSS, but I receive an error image not found.
Using image from assets in HTML like:
<img src="assets/images/news-placeholder.png" alt="news-image" />
works pretty fine.
Approach url('/assets/images/wallpaper.jpg') in CSS works, but only on localhost, when deployed on the server the image is not found as there is no assets folder in root directory and that's my problem. Also the IDE (PhpStorm) says that it can't resolve assets directory even if the image shows up.
I found out, that this approach: url('assets/images/wallpaper.jpg'), is the best, but when I use it there is an error at localhost, that it can't resolve image in path of component, eg. /src/app/modules/portal/components/page-header
If your app is deployed anywhere else than the host's root path, i.e. www.example.com/apps/myApp instead of www.example.com, it needs to be built with appropriate --base-href flag, like this:
ng build --prod --base-href /apps/myApp
Make sure you have added the assets folder inside the build option in angular.json like this.
"assets": [
"src/favicon.ico",
"src/assets"
]
Related
I am having a css file in my assets/css folder, that needs to access some fonts in the assets/fonts folder. I can make it work localhost by writing url('/assets/fonts/myfont.svg').
On the server this isn't working because the path to the root of my site is mydomain.com/myapp/. I have changed the base from to
Then I have tried:
url('assets/fonts/myfont.svg')
url('~assets/fonts/myfont.svg')
url('./assets/fonts/myfont.svg')
But then the solution won't compile ( Can't resolve 'assets/fonts/myfont.svg')
Thanks very much in advance!
Can you try this url ~src/assets/fonts/myfont.svg
It definitely works for me.
You have to declare all your assets in your angular.json file like for example assets folder which is usually declared by default. That makes your assets folder directly available and after the build process, you would notice assets being transferred in the dist folder. Then to use anything from the assets you would write /assets/img.png. The slash before tells the link to take the directory from the root, whereas assets/img.png can sometimes be interpreted from the current directory.
you have to check angular.json and change the assets root like this
"assets": [
"src/favicon.ico",
"src/assets"
],
and the source root under projects like this:
"sourceRoot": "src",
I created a Geonode project following the instructions of geonode-project GitHub repo.
After running the instance for development using the respective docker-compose files I tried to apply changes to site_index.html and site_base.css files.
The changes on the html file are ok however the css changes are not assumed, only if I run the collectstatic command.
Since I'm running it in dev I was expecting that the collectstatic would not be necessary.
I tried to add the volume -./my_geonode/static/css:/mnt/volumes/statics/static/css in the django service on the docker-compose.development.override.yml file but even so t doesn't work. When I enter in the django container and open the file/mnt/volumes/statics/static/css/site_base.css my change is there though.
Doing developments and run the collectstatic at every css change is annoying. Am I doing something wrong? Please help.
Thanks
I am pretty sure what I am trying to accomplish is kind of extreme.. no wait, it isn't!
I just need to get the ionic resources+phonegap-cli+phonegap build combo right.
Now, here's the problem.
No matter how hard I try (because I probably am trying hard and wrong ^^ ) I can't get an ios build to show the icon files I am submitting to phonegap build. But I am beginning to consider the fault not entirely on pg:build side.
I have a root folder, with an /app application and a /resources folder. The latter is generated by ionic resources.
Now when I build for phonegap remote I have this structure in a /pgbuild folder I create ad hoc:
/resources
/www
The config.xml (which is in the main project root folder) contains the following entries:
(source: cloudfront.net)
Here's my ipa package contents:
(source: cloudfront.net)
Which is more or less what specificated in the phonegap build docs. In the docs there is no way I found to understand to which path these src are relative. To the root of the zip? to the root of the www? I've tried also to move /resources to /www, to no avail.
I've tried pretty every combination of folders and src, but I am missing something because the info.plist contains only:
CFBundleIconFiles = ( "icon.png", "icon-60.png", "icon-60#2x.png", "icon-76.png", "icon-76#2x.png", "icon-60#3x.png" );
which is weird because these icons are correct :) except for icon.png which doesn't get copied.
In one app I had this exact problem which prevented me to submit to the app store, I finally solved it but -believe me or not- I am not able to recreate this condition on another app.
These are the commands I run from my ionic app root:
ionic resources
to generate resources, then:
mkdir -p pgbuild/www;
mkdir -p pgbuild/resources
cp -R ./resources/* ./pgbuild/resources
cp -r ./www/* ./pgbuild/www;
cp config.xml pgbuild/;
cd pgbuild && phonegap remote build ios && cd .. ;
Is phonegap-cli supported for this kind of remote build? Am I missing something?
#suprandr,
I've got online Demo Apps on getting icons and splash screens working. The documentation for iOS is especially convoluted. (Should we blame middle managers for taking old documentation offline?)
The notes on github include: On filesnames and how they are found for iOS
NOTE: I only use PhoneGapBuild. I've created boilerplates to get around this annoyance for remembering what I did the last time. Best of Luck, Jesse.
Here's what I found.
I understand that resources must be inside www, and the path in config.xml is relative to the www folder. That seems to fix the problem, even if you should increase the size of your app bundle this way (it would be better if phonegap could take resources outside of the www folder which is used by the application).
so if I have a
www/resources/ios/icon/something.png
in the config I should use
resources/ios/icon/something.png
Also, the ionic resources command embeds resources into
<platform name="ios">
That doesn't seem to be appreciated by Phonegap Build.
Google Chrome dev tools all of sudden stopped showing the CSS file names on my local drive - see screen shot at link:
Link to CSS Dev tools no file names
However when I goto the WWW it works just fine - there I can see the CSS file names?
Can someone please help - I don't think it was me as I have been using them for years and it has worked just fine.
See Web screen shot:
Web Site link dev tools with file names
I just noticed this today
Thank you.
I wonder if it is a symptom of using Workspaces in developer tools. Have you setup workspaces and mapped network resources locally? I haven't used them much, but I messed around to see if I could replicate your problem.
I didn't see exactly what you are seeing here, but the CSS file name went away when I setup a workspace, leaving only localhost/ .
Without workspace:
With workspace:
Please try the following:
Open DevTools
Click the settings cog in the upper right.
Scrolling to the bottom of the general tab and clicking "Restore defaults and reload."
Workspace references sourcemaps from its root
I just fixed this issue by generating my sourcemaps so that they reference their source files (less in my case) relative from the root of my workspace. When not using dev tools workspace, it works because they are able to find the source files relative to the directory that the sourcemap is in. When not referencing from a workspace, this breaks since Chrome appears to reference from the workspace root. Ran into the same issue for JS source maps as well.
MyWorkspace (node project root)
> bower_components
> node_modules
> routes
> wwwroot (public static root)
> app (AngularJS client)
> assets
> css
> app.css
> maps
> app.css.map
> less
> bootstrap (less source)
> app.less
> app.js
> package.json
So for me, the sourcemap "sources": array must reference my less source files like so:
app.css.map
{ "version":3,
"sources": [
"/wwwroot/assets/less/app.less",
"/wwwroot/assets/less/...."....
In addition to this I had to setup node so that when it runs in dev mode it exposes additional routes for /wwwroot/ as well as /node_modules/ so that it could link the routes correctly to my workspace.
I'm using gulp-less-sourcemaps to build the CSS sourcemaps and my less build step looks like (in case anyone's struggling with gulp) -
.pipe(less({ sourceMap: { sourceMapRootpath: '/wwwroot/assets/less' }}))
If you change the path of your CSS when Chrome is currently mapping, it may map the invalid folder path.
My solution it is:
Open DevTools
Go to settings
Go to workspace menu
Delete invalid folder
i generated the scaffold of a famo.us project with Yeoman (yo famous)
i set up i small working project
i tried to launch it with 'grunt serve' command
it all works but no image is loaded because the folder content/images is not loaded
how can i include it?
thanks
I'm Myles the author of the Famous-Generator. The images in '/content/images/' should be able to be loaded as an absolute or relative path... although I have just updated the generated 'main.js' to use an absolute path for the sake of being explicit.
Remember that when you famous code is run it will be running inside of index.html, and therefore have the same "relative path" for included assets. As well, since you are serving via a development server, you are able to reference anything with absolute paths relative to the root directory of the project.
You should not have to touch requireConfig at all to be honest. It is only used to add vendor code installed in 'lib' to your path within require so you can reference modules by name rather than path. 'underscore' rather than '../lib/underscore'. This becomes nice as you begin to nest folders and don't want to have to manage relative paths. This also makes your code a lot more portable!
A nice sidebar, you should install all vendor code with 'bower install --save $LIB_NAME'. This will save the library / version to your bower.json and inject the path for the module into you requireConfig. Basically you can bower install anything and just start requiring!
yo famous is working just fine!
it was my mistake to try to set relative paths inside requireConfig including images: that is not working but i don't know if it is supposed to!
you have to use relative paths for every image and everything will be ok!