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
Related
i have a folder filled with svg's (path: src/assets/icons).
The css function url() is implemented like this:
url("/assets/icons/CheckSmall.svg");
It finds the svg data, when I run ng serve.
But when I build my Project, it cant find the svg data. Although it exists in the folder dist/myApp/assets/icons/CheckSmall.svg
I have read through many forums and discussions and tested a few things (One of many discussions).
For example i used different pathing "strategies":
1. url("^assets/icons/CheckSmall.svg")
2. url("~/assets/icons/CheckSmall.svg")
For number (1) it seems like it is not a supported feature in Angular, thats why i dont want to use it. And for (2) it copies my Assets and puts them into the folder dist/myApp.
Is there a viable(supported or documented) alternative? Or can I somehow adjust the angular.json.
Try using the following syntax:
background-image: url('../../assets/icons/<file-name>')
Where the route is relative to the css file
If you're setting non-default baseHref or deployUrl flags as part of the build that can also affect it
Try using that approach in styles.scss or in the relevant component, without the scss variable. The relative path won't be correct when the scss variable is used in different folders
In Laravel 5, in what directory should I store images (for backgrounds) and how to access it inside a CSS file. My CSS file is on public/css directory. I've tried to place the image in public/images and public/assets/images but didn't work and even I couldn't access the image directly from web browser.
In CSS you can access images, when they are in public/images, like
../images/imgename.jpg
In the blade template, you can use something like
"{{ asset('images/imagename.jpg') }}"
public is fine. You should access them in your css file via, e.g., /images/xy.jpg or /assets/images/xy.jpg. The / at the beginning makes sense to refer to the root directory.
If this does not work, please provide paths of images, css and an example css file that does not work with the images.
All files inside of public/ are accessible via web browser, just put the images or css there. Example:
public/images/foo.png
public/css/style.css
Normally in this structure is only needed to do background: url('../images/foo.png').
However, some people has problems using absolute path like background: url('/images/foo.png'), why? because the laravel installation is made under htdocs/ or public_html/ having the following structure:
/home/user/public_html/laravel/public/
If the above structure is used by you, you need background: url('/laravel/images/foo.png')
You can just use : url(http://localhost:8000/imgs/image_name.extension) as follow my exemple : http://localhost:8000/img/spacer.png but pay atention do it in the dev enviroment in deploy change localhost:8000 for your domain name
For me the answer was to use a tilde (~) instead of dots:
So the full line in the CSS became:
background: url('~/storage/images/DownArrow.png') no-repeat right #fff;
The storage folder being in the public folder.
With Laravel 5.7 I had been running 'npm run dev' and getting:
Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve './storage/images/DownArrow.png' in 'C:\xampp\htdocs\websitename\resources\sass'
Thanks to 'mlachance' in another forum for the tip. He also says 'This is not well documented in the Vue CLI chapter on static assets.'
I have a question about how to solve the following situation:
In my sass-files I use absolute path variables in my main include files, e.g. fonts are located in /assets/fonts/... and icons are located in /assets/icons/... and so on. Now these paths are obviously working only when the domain is in root.
The environment I wish my application to run on has a different folder structure which goes a few levels deep.
Here is an example of the file structure in my development environment:
/root
assets
icons
...
home
home.scss
page1
module
module.scss
Here is an example of the file structure in the new environment:
/root
various
subfolders
assets
icons
...
css
home
home.css
page1
module
module.css
As can be seen: The compiled CSS gets created in subfolders which can become quite deep, i.e. like 8 stories deep. The root declaration in my css will no longer work because of the new tree structure.
My options are as follows:
adjust my sass so that at all paths are relative (don't like to do that, will make my sass more complicated, everything seems to be good the way it is)
adjust my .htaccess so that this is covered (don't like that either, have to adjust everytime I switch the environment, seems "hacky")
create/use a gulp task that fixes my compiled css files so that the relative paths are added to all findings of url("/assets
I have searched quite a lot, looked into thread2, gulp-tap and gulp-replace. But somehow I can't quite get it right. For instance: The obvious solution, gulp-replace, is not working as I need it to because I need to get information about the file that is currently in the pipe (to get its file.path and thus find out how many stories the file has climb up to reach the assets folder).
Does anyone has ever done this? Or maybe has an idea how to solve this?
Alright, solved it myself. I have created a gulp-plugin for this:
https://www.npmjs.com/package/gulp-css-adjust-url-path
I have actually done this before but I can not remember how to get this right. Does anyone know the proper setup or of a tutorial that explains how to set this up without a plugin?
Getting Adobe Edge Animations to work in WordPress (or any other CMS)
I just did this myself, and posted an article on Codepen about it; http://codepen.io/write/getting-adobe-edge-animations-to-work-in-wordpress
I've also opened up an issue over at Github; https://github.com/wittnl/Edge-Animate-Runtime/issues/3
The problem
When EA (Edge Animate) is looking for assets they use relative paths.
This becomes a problem when we're using WordPress, where we need to reference our theme folder, an absolute URL.
ERROR 1
The main file edge.x.x.x.js fails loading the right javascript file for the composition. Resulting in a 404, file not found.
ERROR 2
The composition specific javascript file that get's loaded by edge.x.x.x.js have relative paths to images etc. Resulting in that no images are loaded.
What we want
Have all our assets stored in our theme folder
Have all files load properly and enjoy our animations
The solution
1) Modify the main javascript file
Make your own version of the main javascript file, e.g; edge.5.0.1-edited.js
Check for comp.load and change it so that it loads from our theme folder correctly.
comp.load('/wp-content/themes/my-awesome-theme/assets/edge/' + projectPrefix + "/" + projectPrefix + "_edge.js");
2) Modify the "composition"-specific javascript file
Change the variables you need to change (e.g images) inside tools_edge.js so that it points to your theme folder.
var im='/wp-content/themes/my-awesome-theme/assets/edge/tools/images/'
I wanted to combine app_themes css files into one on the fly. I did so using Mads Cristensen
technique. But now all elements that has background image defined through css (see picture) don't display image.
.
I believe that is because css files are not relatively referenced anymore (../), but through axd file.
I'm trying to fix this by changing reference to image files without success. I already tried background: url("~/App_Themes/44/images/myimage.gif") and this works for pages that combined css. But the problem is that there are other pages in this project that don't use this css combining and now they lost reference to background images.
Any ideas?
I think that the ApplicationPath might be causing some confusion in this case...
Using a logical path (relative to the web-server's root) in the *.css file will work irrespective of whether it's rendered natively from the App_Themes folder or through an *.axd handler.
Take this example, for instance:
body
{
background-image:url('/WebSite1/App_Themes/Theme1/Image/Logo3.png');
}
This will resolve correctly whether it's rendered through an *.axd handler at the root (or at any depth below the root) and it will resolve if it's rendered at /WebSite1/App_Themes/Theme1/StyleSheet.css.
ASP.NET specific paths beginning with ~ (so-called root relative paths) have no force in *.css files and need to first be resolved to a a logical path using ResolveUrl().
(1) - http://www.west-wind.com/weblog/posts/132081.aspx