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.
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 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 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.
I'm using symfony v2.0.7 and AvalancheImagineBundle in a project. I configured all files like https://github.com/avalanche123/AvalancheImagineBundle/blob/master/README.md
But image caching not works and directory for cache has not been created. Also images source are showing dev controler at the begining in src:
<img src="/app_dev.php/media/cache/my_thumb/uploads/images/logo.jpg">
I guess it should be without dev controller:
<img src="/media/cache/my_thumb/uploads/images/logo.jpg">
the folder is created in your
web/media
of your project
of course the path changes, depending on the fact if you call it in your dev Environment
http://www.myproject.com/app_dev.php
or the prod Environment
http://www.myproject.com/app_dev.php
I cleaned up someone's style sheet for a Dreamweaver site, by editing the css directly, and now the secretary is having trouble using her old template.
Most of the files in her site reside in subdirectories of the 'upload' directory. For example, I would have expected to see the stylesheet in
../assets/css/ etc.
but in fact I'm finding it in
../upload/assets/css/ etc.
In addition to assets, I am also finding Templates and images as subdirectories of 'upload'.
Do you know why this 'upload' directory was used?
I am considering two possible approaches.
(1) Make sure everything needed is in ../upload/ and remove the subdirectories that are directly in the root directory
(2) Edit the template to remove all references to ../upload/
Note that (2) appeals to me because the file structure will be simpler; but I wonder if the client has some sort of extension in her Dreamweaver that causes everything she ftp's to be put into the 'upload' directory.
Note that so far I have copied my cleaned up css file over to ../upload/assets/ as a short-term solution. But they want to be able to make changes to their template, and add new pages, on their own in future.
Thanks.
The likely problem is how she has her FTP remote settings specified. It appears that it now points to the upload folder rather than the web root. Or, it could be that her FTP user account is tied to the upload folder rather than the web root.