I am using Create-React-App and I want to add background image for my header section and I am doing this in that way:
background-image: url('~/Screenshot_11.png');
After this I'm getting this error:
./src/styles/main.scss
(./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js??ref--6-oneOf-5-3!./src/styles/main.scss)
Module not found: You attempted to import
../../../../../../../Screenshot_11.png which falls outside of the
project src/ directory. Relative imports outside of src/ are not
supported.
I've set up homepage in package.json
"homepage": "http://localhost:3000",
In my older projects that works but today I cannot import this correctly.
They have changed that but I don't know why. Working path:
background-image: url('/Screenshot_11.png');
EDIT 2021
For people who think that it doesn't work:
https://codesandbox.io/s/agitated-turing-gsnr3
you can import that image as
import Background from './Screenshot_11.png'
and use
background-image: `url(${Background})`
This still does not work for me with images in the public folder.
UPDATED 19 March 2021
Regarding using of <ROOT/public/images> in .css files.
It appears to be a breaking change (will be considered as a bug?) in create-react-app (react-scripts) package v4.x.
And more precisely in package 'css-loader' v4.x.
3.x branch works OK with that.
Here is the corresponding issue on the github repo:
https://github.com/facebook/create-react-app/issues/9870
(and there are few more actually).
No fixes (yet). (will be?..)
But a few workarounds mentioned there.
Which one to use... it depends on your project, I suppose.
Some of workarounds:
downgrade to react-scripts 3.4.x
don't use url in CSS files :) you still can use in .JSX (inline styles). Or put in .html. They are obviously not processed by css-loader.
reconfigure webpack to add url:false to css-loader options (either eject CRA or use this: https://github.com/gsoft-inc/craco or this: https://github.com/timarney/react-app-rewired
(you can find sample configurations at the github issue page)
use this new feature of css-loader https://github.com/webpack-contrib/css-loader/pull/1264
(released in 5.1.0, current last version is 5.1.3; to use that version you can add the following to the package.json: "resolutions": { "css-loader": "5.1.3" } (at root level) )
My cell output in Jupyter Notebook is cut off on the left hand side which obscures the leftmost output. For reference (I can't post images yet):
https://imgur.com/gallery/rg759nN
Any idea how to fix this?
EDIT: Thanks to rabbit on below, the problem seems to be caused by using the alternate themes provided by Jupyter Themes
Found the solution on Jupyter Themes github page:
https://github.com/dunovank/jupyter-themes/issues/288
"In the custom.css file, I fixed it by changing both the div.out_prompt_overlay.prompt's and the div.out_prompt_overlay.prompt:hover's min-width and width values to 11.5ex instead of the original 14.5ex."
Alternatively I added the padding:
div.output_area {
display: -webkit-box;
padding: 13px;
}
To the chesterish.css file (which was the theme I was using) and reapplied the theme using jupyter themes.
Ctrl + Shift + C to open DevTools in the browser.
go to Sources and click on static
search for: div.output_area
change padding to 13px
(The developer missed 1 and put only 3px distance)
This was raised as a bug and fixed (see https://github.com/dunovank/jupyter-themes/issues/273). As stated by Ernest in a comment: the solution is to upgrade the package and load the theme again i.e.
pip install --upgrade jupyterthemes
jt -t {theme}
you need to fix the container-margins in the command line by:
jt -m 100
and then:
jupyter notebook
(100 was good for me)
I'm stucked in this situation:
Suppose: foo.styl, bar.styl, basic.styl
In foo.styl and bar.styl, they both #import "basic".
I'm wonder how these two files can be automatically re-compiled once basic.styl is modified?
It seems WebStorm File Watcher handles this well out of the box, but how it can be achieved in gulp?
Another scenario:
foo.styl --> #import "bar"
bar.styl --> #import "basic"
Now basic.styl is getting modified.
How to make both foo and bar re-compiled in the proper order, i.e. basis -> bar -> foo?
Thanks a lot.
My folder structure looks like
-myapp
-assets
-home-page-img
-header-bg.jpg
-src
-app
-home-page
-home-page.component.css
-home-page.component.html
-home-page.component.ts
Inside my home-page.component.css, I have the following
header {
width: 200px;
height: 200px;
background-image: url('/src/assets/home-page-img/header-bg.jpg');
}
My angular-cli.json
"assets": [
"assets",
"favicon.ico"
]
When I run the code, I get
GET http://localhost:4200/src/assets/home-page-img/header-bg.jpg 404 (Not Found)
For demonstrating purpose, If I change background-image to the following, I get a whole different error
background-image: url('assets/home-page-img/header-bg.jpg');
./src/app/home-page/home-page.component.css
Module not found: Error: Can't resolve './assets/home-page-img/header-bg.jpg' in '/Users/JohnSmith/Desktop/my-app/src/app/home-page'
How can I get that image to load?
I use it. Always starting with "/assets/" in CSS and HTML "assets/". And I have no problems. Angular recognizes it.
CSS
.descriptionModal{
background-image: url("/assets/img/bg-compra.svg");
}
HTML
<img src="assets/img/ic-logoembajador-horizontal.svg" alt="logoEmbajador">
try
background-image: url('../../assets/home-page-img/header-bg.jpg');
For background-image: url(/assets/images/foo.png), I have another problem with i18n + base-href, finally I found a workaround solution.
My problem was solved by:
background-image: url(~src/assets/images/foo.png) .
image tag:
<img src="assets/images/foo.jpg" />
Demystifying Angular paths to resources in CSS files
This is not documented nor has anyone to my knowledge written about it.
This is true for Angular 11 but has certainly been around for a while.
(Note: setting --base-href or --deploy-url in ng build has no consequence to the following).
The regular way to include assets in a css file, such as:
background-image: url(/assets/someImage.png);
is with a leading slash. During the build prosses (ng serve or ng build), if angular sees that leading slash, It will ignore that path, meaning it will copy it as is. So the browser will see that path '/assets/someImage.png', and will look for that file starting at the root or as we call it domain. (Note: paths in CSS are relative to the location of the CSS file, but even in CSS a leading slash means looking for the file starting form root).
Angular assumes you put that file In the default assets folder, who's contents are copied as is to the dist folder, and that sits by default in the root, so someDomain.com/assets/someImage.png just works.
However, if for some reason you are trying to do something else, and you remove that slash, a whole new prosses is happening. For example, lets say you now write
background-image: url(assets/someImage.png);
without the slash. (for example when you deploy your app to an inner folder in a domain 'someDomain.com/some-folder/', and assets is in that folder. With the slash it will look for assets in the root, and it not there, its in some-folder. So you remove the slash thinking that it will also copy that code as is and look for assets from where the css file is, which is what the browser will do).
Surprise! Angular this time does not ignore that file path!! it looks for it during build time!! and it doesn't fine it, and you get that annoying error saying angular can't find that file.
So what you do is rewrite that path until angular can find it (in your file system), for example: if your in a deeply nested component
background-image: url(../../../../assets/someImage.png);
And then, boom, it works, but take a look at what happened to your dist folder and to your CSS code.
Angular makes two copies of the someImage.png file. One in the regular assets folder and the other in the root, right next to all the js bundles. And in you CSS file
background-image: url(../../../../assets/someImage.png);
will be rewritten to
background-image: url(someImage.png);
This works, but not exactly nice dist folder structure.
This behaver is same for global style.css or component style that gets injected to the index.html or shadowRoot (ViewEncapsulation.shadowDom)
(Note: in the html templates there are no checks or rewrites)
We can use relative path instead of absolute path:
.logo{
background-image: url('assets/home-page-img/header-bg.jpg');
}
or
.logo{
background-image: url('~src/assets/home-page-img/header-bg.jpg');
}
#Samuel Ivan's answer does not work for me. Maybe because I am developing an internationalization project. At the end, ^ helps me with
.descriptionModal{
background-image: url("^assets/img/bg-compra.svg");
}
And the answer comes from https://github.com/angular/angular-cli/issues/12797
Everyone's missing one thing base-href.
2 Ways:
background-image: url("^assets/img/bg.svg"); [TLDR; just use this]
This will work even if its going to be deployed in a subdirectory rather than root (i.e. you specify a base-href other than the default /).
background-image: url("../assets/img/bg.svg"); [Using relative path]
Using the relative path from the current css,scss,sass file to the actual image in the project folder like. This will work if the assets folder is 1 level above in the directory tree. ("../../" for 2 levels and so on..)
Using a different base-href will not work with this one.
Also, in the build; for the first case this file will be used:
dist/app-name/assets/img/bg.svg
and for the second case the same file will be copied over to the app-name directory and used from there (causing unnecessary redundancy if you already have src/assets in the build assets array in angular.json, which you will in most cases):
dist/app-name/bg.svg
Reference: GH Issue
Try to use this below:
background-image: url('./../assets/home-page-img/header-bg.jpg');
Angular 9+ This Works for me.
.main-bg{
background-image: url("src/assets/main-bg.png");
}
My problem was solved by:
background-image: url(~src/assets/images/foo.png) .
the same with Hieu Tran AGI
You should fix to the file path. My problem was solved:
background-image: url('../assets/img/logo.jpg')
I'm just starting to create a blog with Pelican and wanted to link to an image. I did this by including the following line in my Markdown file:
<img src="./myImg1a.png" alt="./myImg.png" style="width: 750px; height: 800px;"/>
This line was successfully reproduced in the html file, which Pelican placed in the output directory (i.e. /myBlog/output). I placed the png files in the output directory (i.e. the same directory as the html files and got the following error:
WARNING:root:Unable to find file /category/myImg1a.png/index.html or variations.
where /category refers to myBlog/output/category. When I, instead, used the following html code:
<img src="/myImg1a.png" alt="/myImg.png" style="width: 750px; height: 800px;"/>
everything worked fine. I don't understand why this should be:
If the image file is in the same directory as the html file, shouldn't "./myImg1.png" be correct and "/myImg.png" be incorrect?
Why was the folder /category/myImg1a.png/index.html being sought at all?
First of all, by design, you should not change the contents of the output directly/manually.
You should put all your static contents in separate directory which is usually named as images or paths. And, then configure the path(s) in pelicanconf.py as:
# ...
PATH = 'content'
STATIC_PATHS = ['images', 'files'] # add any no. of locations
# ...
In that case, when Pelican is building actual page, it will look for any referenced static file in ./content/images and ./content/files locations. If cannot find there, it will emit the error message.
Now, answering to your trouble ...
By,
... src="./myImg1a.png" ...
Pelican look for this myImg1a.png file in your myBlog/content/ folder as you are mentioning ./ which is the root folder for Pelican is working on.
But, when you are referring it as
... src="/myImg1a.png" ...
Pelican eventually finds it in the html file's directory. By getting / as location, Pelican is looking for it in the same directory of your myblog/my-blog-post/index.html which is myblog/my-blog-post/.
Hence, working. But not in the ideal way.
For a deeper understanding, please take a look into Pelican's documentation on this matter.
Why was the folder /category/myImg1a.png/index.html being sought at all?
Pelican, here, just trying to be smart.