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".
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 cannot find anything on the internet probably because I'm not sure how to ask the question properly, but I cannot seem to figure out why on some images or links to pages i have to put ../ in front of the file name for dreamWeaver to see the file. It's not every file just some of them.
It depends if the pages or images are in a separate folder.
If your page is in root/pages/home/index.html and your image is in root/pages/home/images/image.jpg then you will only need images/image.jpg but if the image is in root/pages/about/images/image.jpg then you require .. because it's outside of the local folder.
This is a good link: https://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/
I hope someone here has used the Blink.jl package for building Julia and Electron apps.
I am having problems setting up and using it, though. The issue is with all of the functions in the api provided: load/loadcss/loadjs/importhtml. They do not seem to work, or I might be doing something wrong.
For example:
loadcss!(w, "styles.css")
does not apply any of the styles in the styles files in the directory.
importhtml!(w, 'index.html')
does not display the html page stored in the local directory. The app shows a blank screen.
I might be doing something wrong as i could not find documentation on how to use the package
I think I found out why, the methods take the full path and not the relative paths, even if files are inside the same folder. So, something like this works:
loadcss!(w, "D:\project\styles.css")
but this won't work:
loadcss!(w, "styles.css")
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");
I am working on a SproutCore project. I am trying to get the site as is on the IPAD, but the CSS background images, onClick and redirect is not working on the IPAD.
Let me know any solution on this.
When developing on the iPad, I have found the following to be useful in my Buildfile:
mode :debug do
config :all, :combine_javascript => true
end
Most iOS devices tend to have difficulty loading a large number of Javascript files, and this will concatenate them all into one. This may or may not resolve your issues, but many issues manifest if you leave them as separate files.
Also, do you have any errors in the debugger that you could share? It might help us track down the issue.
For broken images/CSS after building, it's often a relative path issue.
You might want to check your CSS / image paths in your compiled CSS & index.html files.
After building the project, look inside your output directory and try the following:
Open index.html file in your browser, and see which CSS/image files are not loading correctly.
Find your index.html file and replace instances of "/static" with "static"
Find stylesheet-packed.css & stylesheet#2x-packed.css and replace instances of "/static" with "../../../static" (or whatever fixes the path in your case)
I have build.sh script to automate this and it works for me. Let me know if you want it.. Good luck!