I have a component whose SCSS references an image in the same component folder, using background-image: url('./logo.jpg').
Removing the leading ./ does not help either. In any case, the image does not show in the browser.
I am running ng serve and looking at the dist folder, logo.jpg is indeed copied and placed in the same component folder as expected.
I would also like to be able to reference images from other locations outside the folder that my .css or .scss file lives in, using relative paths like I do with my component .html and .css from the .ts file.
I think I need some sort of url resolver that would generate the full URL on the outputted .css file. How would I obtain such a resolver and how do I configure it in Angular CLI?
Had the same problem. Solved it by changing the path in the Less/Sass file to url(/assets/path_to_img) and it should work. Don't forget the "/" at the beginning and to put your image in the assets folder.
I noticed a similar behavior.
It seems that images referenced in the CSS under the Assets folder are extracted and given a guid, whereas the same does not apply to Component level CSS.
In the end I copied the image file under the Assets folder (without referencing it in Angular-cli.json) and then I was able to reference it in the component CSS with:
background: url(assets/img/bgs/footer.png);
try using this background-image: url("./~/assets/images/artist-bg.jpg");
Related
I've included 2 svg images for my background, one is at top and other at bottom. With my local host (live server) they show up without any problem, but now that is uploaded at github it doesn't show at all. I don't know what's wrong since all the assets (folder with images) are correctly uploaded.
Chrome shows this error:
2 GET https://ruth9403.github.io/assets/images/bg-top.svg 404enter image description here
I'm a noob just doing my first attemps of web pages :'v, and also new at github.
This is my github repository:
https://github.com/ruth9403/pricing-toggle-hamburger.github.io
And this is my github url for the project:
https://ruth9403.github.io/pricing-toggle-hamburger.github.io/
Thanks a lot for your time, and your kind soul!:Denter image description here
You have an issue with your path. Your CSS file is in the folder assets. And your absolute CSS path after resolution points to https://ruth9403.github.io/pricing-toggle-hamburger.github.io/assets/assets/images/bg-bottom.svg which doubles the assets folder.
Hence you have to change the image path for the background to images/bg-bottom.svg. Basically you have an issue with your relative path. For CSS files always the folder where the CSS file is located is used as "starting point" for the traversal.
Should solve it:
body {
background: url("images/bg-bottom.svg"), url("images/bg-top.svg");
}
at least it did for me :P.
A project site is available at http(s)://<user>.github.io/<repository>
In your case: https://github.com/ruth9403/pricing-toggle-hamburger (not https://github.com/ruth9403/pricing-toggle-hamburger.github.io)
Make sure to check the settings of your repository in order to activate the page publication.
Make sure the publishing source is master (it would be the gh-pages branch otherwise by default for a project page).
I have the following brand new project, created with:
$ ionic start MyIonic2Project sidemenu --v2
My question is very simple:
where do I locate a directory for application images (asset images / fixed images / icons / etc)?, inside: {resources, src, www, etc}?. I'm looking for best practices.
how the url of these images would look like?. I wanna specify the <img src="<url/to/image.jpg>" /> element within the file: src/pages/home/home.ts.
src/assets/ folder should contain all the resources. You can use any sub-folder depending on type of resource. During the build process everything in the src/assets is copied to www/assets.
how the url of these images would look like?
You have to give the path relative to your current file when it would be in www folder.
It is generally ../assets/../filename if you are setting in your scss file.(This would end up as part of main.css within build folder).
and ./assets/../filename in your html file.
I have now spent a lot of time to figure this out, but I just can't come up with a solution. Basically a relative link like this just won't work:
background-image: url(../../img/footer_lodyas.png);
I don't know why. In my other project such relative links are working just fine. The only difference is, that here I'm using SASS/SCSS, and I don't know what to do. I already tried to use direct links to the images in the repo, but that also didn't work.
It is also strange, that the SCSS is working, so all styles etc. are there, it is just the URLs which make a problem.
I don't have a _config.yml file, since it is not neccessary anymore for having relative links - well maybe not with a css preprocessor?
so for anyone who is having a similiar problem here is my solution:
I had the path of the URL set to the path of the SCSS-file and not to the main.css, so instead oof having
background-image: url(../../img/footer_lodyas.png);
which would be valid for the path of my SCSS-file I changed it to the path of my main.css. Now everything works fine on github, without even using an _config.yml file.
background-image: url(../img/footer_lodyas.png);
It has to be that way, because my main.css is in a folder called "css" which is in the same folder as my folder "img".
To my Grails project, I use ztree library.
In the css of this library, we have the following :
background-image:url("/ztree/img/zTreeStandard.png")
I have 3 directory in assets/
images/
javascripts/
stylesheets/
I don't want to modify the css to change the path of background-image:url("/ztree/img/zTreeStandard.png").
So, here are my questions :
Is that mandatory to create a ztree directory in assets/ ?
Can I put ztree directory in images/ ?
Thanks,
If you store the image at grails-app/assets/images/ztree/img/zTreeStandard.png, the assets-pipeline plugin should be able to resolve it (I haven't tested this). If it doesn't work, the reason will be because of the leading / in the path
background-image:url("/ztree/img/zTreeStandard.png")
I understand that you don't like modifying 3rd party code, but I don't think you'll have any choice other than to change this to
background-image:url("ztree/img/zTreeStandard.png")
I would recommend creating a assets/vendor directory and you can just dump all your third-party libraries in there. It should be smart enough for you not have to change any paths--though the absolute URLs might mess things up since usually grails is running at http://host:port/app-name/.
I know the subject line must sound really stupid. Of course you would locally develop HTML files - didn't know how to phrase it better since I'm a beginner at HTML+CSS.
So to get to the point:
I'm linking to images and pages on the HTML file I'm editing. However, when I open the HTML file in my browser locally the links are broken because I'm not using an absolute path. My preference is to use relative path because I'll be able to simply move my project file folder onto my server without having to change the URL paths in my HTML files.
My question is: How do I get the relative paths to point to where I want without having to list the entire drive directory?
Ex. My local HTML has the following line:
<img src="/images/logo.jpg">
But opening the local HTML file in my browser, the image is broken since it points to: file:///D:/images/logo.jpg
How do I get it to point to {local root}/images/logo.jpg instead?
What I did was to install a local development server such as EasyPHP, and setting the proper root folder within my project folder. Setting the root folder tells the local server where the root is, and so any relative paths work as expected.