How to disable change of directory?
Currently, all the relative paths in my config are interpreted relative to the hydra output folder, not relative to current working folder.
I'd like to be able to disable this options somehow please.
You can override the hydra.run.dir to . for now.
You can also translate the paths to be relative to the original working directory (see this).
You can also change your relative config paths to be relative to the original working directory (see Example link).
Example:
configen:
# output directory
output_dir: ${hydra:runtime.cwd}/example
In 1.1 I have plans add more control over this behavior (issue)
Related
I'm trying to access the logo image which is in public folder while my css folder is in src. I'm also using sass and I took into consideration that we need to write the path relatively to css file - not sass.
I tried different ways - with absolute path, with quotes and without - just hoped that maybe something will work.
I found someone's code https://codesandbox.io/s/musing-rosalind-21lsd?file=/src/App.js and played with it - I created same conditions as I have and it worked, but when I go back to my project it doesn't.
I'm using background-image: url('/logo.swg'), and it says Error: Can't resolve '/logo.swg'.
I'm aware of ejecting and webpack configuration changes, also I know that if I change the css and sass folders' path moving it outside of src it may theoretically work (with an absolute path I guess - since React does not allow us to refer to files outside of src directory).
I'm wondering if something changed in React, does anyone know? It works when I write the url as inline style, and it works when I import it in js files.
Thanks in advance.
versions:
react^17.0.1
react-scripts^4.0.1
create-react-app^4.0.2
You can use the following list as quick reference:
/ = Root directory
. = This location
.. = Up a directory
./ = Current directory
../ = Parent of current directory
../../ = Two directories backwards
I have a local image in my folder. but I can't use this image. Folders structure:
I want to use logo.jpg in login.component.html. I am using this code:
<img src="img/logo.jpg">
But isn't work for me
TL;DR: Supposing you are using #angular/cli try to move your img folder under src\assets and then do <img src="assets/img/logo.jpg">.
Standard way is to put assets to assets folder under your app source root. The builder is told in angular.json to include assets by defining (for example):
projects.<your-project>.architect.build.options.assets: [
"src/assets",
"src/favicon.ico",
"src/manifest.json"
]
Whatever is defined there will be copied verbatim to your dist folder.
Note that assets must be under src root, somewhere. Therefore trying to add "src/../img" to config will fail. At least with my config and CLI.
Edit: Just noticed you mention Angular5. That is long time ago but IIRC the config file there was named .angular.json (see the dot). The structure of config is slightly different, just look for "assets".
you need to provider the entire relative path
i think it's:
src="../.././img/logo.jpg"
or maybe
src="../../../img/logo.jpg"
change the path to: '../../../img/logo.png'
or Move the imgs to under assets in src, src/assets
and then refer in your img src as:
img src="assets/img/logo.png">
When Laravel Webpack/Mix executes and converts SASS to CSS, it changes the relative paths like url('../images/background.png'); to absolute paths like url('/images/background.png');.
Is it possible that the paths are not updated and kept as relative?
The reason is that the deployment could be in different folders on different servers so that the relative paths will work on all folder structures. E.g., it will work on http://www.example.com/ as well as http://www.example.com/subfolder/. But if an absolute path is used, then in the case of the subfolder, the CSS will not find the images and fonts.
Is there some other best practice to handle this situation?
From the docs:
By default, Laravel Mix and Webpack will find example.png, copy it to your public/images folder, and then rewrite the url() within your generated stylesheet. As such, your compiled CSS will be.
As useful as this feature may be, it's possible that your existing folder structure is already configured in a way you like. If this is the case, you may disable url() rewriting like so:
mix.sass('resources/assets/app/app.scss', 'public/css')
.options({
processCssUrls: false
});
https://laravel.com/docs/5.5/mix#working-with-stylesheets
I am very much confused with these four categories while linking js, css and images to the application as I am creating folder structure for my application ..
I heard ~/Images/up.png means wherever you are it comes to the root and searches for Image folder and gives the image. When I tried this .., it doesn't work. I used ../Images/up.png and it works .. I used /Images/Images.png and it also worked so please explain me why.
You primarily use absolute paths when accessing things outside your own immediate domain.
So if your site is hosted on www.mysite.com and your images are located on images.mysite.com - you'll use absolute paths for them.
Likewise, you use relative paths internally. Relative paths are the ../images/up.png.
You can use absolute paths internally as well, but often you don't want to do it, because it eases usage to not have to think about which domain the resource is located on, but only where relative to your content.
As for the ~/ then it is a .NET thing that indeed means back to the root of the site.
However it requires to be used specially so you cannot just make a normal link and use ~/
It needs to be resolved server side which for example can be done using ResolveUrl - for example ResolveUrl("~/images/up.png") and use the returned as the link. Specific controls will resolve the url for you automatically, but it's still resolved via .NET.
So it's primarily used because you do not have to worry about how many levels the page your working on is located from the root (so you don't have to worry about whether it's currently ../images/up.png or ../../images/up.png)
~ is the root
so '~/js/fancyscript.js' means go back to root go into js and find fancyscript.js
'/js/fancyscript.js' means go into js and find fancyscript.js this will not always work since there is not always an /js folder
for example this is my project
site
/css
style.css
/js
fancyscript.js
/include
view.html
index.html
I have my index in my root folder from here i can use the relative path to include my fancy script
'/js/fancyscript.js'
It will find /js and it will find my script
But when i'm working in /include/view.html i have to go back 1 folder first so the relative path would be in that case '../js/fancyscript.js' (up one folder go into /js and find fancyscript.js)
since the js folder is in the root in my example i can also use '~/js/fancyscript.js'
The difference between an absolute path and a relative path is that an absolute path is a complete path and a relative is from the point where the code is being executed
so the example shown above are relative paths and an axample for an absulote path would be
http://www.google.com
I have a style sheet where I include background images.
background: url(../Images/myImage.png);
problem is, pages from different directories use this css!
My CSS files are in a CSS folder, images in an Image folder, and my html pages are in many different folders depending on their content and meaning to the website.
All my pages inherit this css as it is the MAIN theme.
The path used in the above example is a relative path. And obviously, this path only works for some of the pages. ALL i need is to link the images in the css from the ROOT folder. Therefore every path is correct no matter where the file is in the folder structure!
I have tried:
~/Images/myImage.png
./Images/myImage.png
/Images/myImage.png
Images/myImages.png
I don't think a root folder selector exists... but I hope it does :/
/Images/myImage.png
this has to be in root of your domain/subdomain
http://website.to/Images/myImage.png
and it will work
However, I think it would work like this, too
images
yourimage.png
styles
style.css
style.css:
body{
background: url(../images/yourimage.png);
}
click here for good explaination!
All you need to know about relative file paths:
Starting with "/" returns to the root directory and starts there
Starting with "../" moves one directory backward and starts there
Starting with "../../" moves two directories backward and starts there (and so on...)
To move forward, just start with the first subdirectory and keep moving forward
I use a relative path solution,
./../../../../../images/img.png
every ../ will take you one folder up towards the root. Hope this helps..
For example your directory is like this:
Desktop >
ProjectFolder >
index.html
css >
style.css
images >
img.png
You are at your style.css and you want to use img.png as a background-image, use this:
url("../images/img.png")
Works for me!
This problem that the "../" means step up (parent folder) link "../images/img.png" will not work because when you are using ajax like data passing to the web site from the server.
What you have to do is point the image location to root with "./" then the second folder (in this case the second folder is "images")
url("./images/img.png")
if you have folders like this
then you use url("./content/images/img.png"), remember your image will not visible in the editor window but when it passed to the browser using ajax it will display.
In the CSS all you have to do is put url(logical path to the image file)