So I am trying to use s3 to upload all static images/css/js that I have. In one of my css file which is inside a css folder, I have the following:
background: url('../bundles/sitemain/img/bg-storefront.png') no-repeat center top;
and in my s3 bucket I already have the bundles folder:
With the file bg-storefront.png in the appropriate sub directory. However, is this even possible with amazon s3 such that it doesn't have the notion of what a folder is. So in this case do I have to use the absolute path of the image to make it work?
Using the relative path should work: when the browser interprets the parent directory .., it does it simply by how the URL looks. The browser/website visitor doesn't normally know anything about the actual file structure behind most web pages, and S3 is no different. If your CSS file is named css/style.css and you reference ../bundles/images/a.png, it only matters (to the browser) that the URL bundles/images/a.png exists: it doesn't matter whether a real filesystem or directory structure backs up those URLs.
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
The css, js and image directories are in public directory. In turn, the public directory is inside of views (I don't know if it's a good practice to add public directory inside of views directory).
The css files and the js files(in the public directory) are working but only one of the images (that is, the logo at the navbar section) gets loaded on the browser whenever I start up the server, the remaining images are showing little icons in there respective positions. All the images are in the same directory and I linked all of them in the same manner. Why is it that only one is appearing on the browser?
I don't know if it's a good practice to add the public directory inside of views directory, but when I added both on same path with app.js, all the files in public stopped working. But I know I'm on the wrong track because of the following reasons:
No difference is observed whether
app.use(express.static("public"); is added to app.js``` (that is, the server file) or not. This means that that line of code is not working, still the cssandjs` files work in both cases.
Only one of the images is being displayed on the browser even if all are linked in the same way.
The word public appears in the source of each of the static files, omitting it stops all the static files from working.
App structure:
med,
webapp,
main,
views,
partials
footer.ejs
header.ejs
public
bootstrap
css
js
images
home.ejs
post.ejs
news.ejs
about.ejs
contact.ejs
app.js
package.json
I hope indentation will help here since I'm not allowed to post pics yet.
The images in home.ejs are
img src="../views/public/images/syringe-pill-capsule.jpg,
img src="../views/public/images/dna-1811955_1920.jpg",
img src="../views/public/images/lab-217043_1280.jpg".
the only one that is loading on the browser is the logo at the navbar section,in header.ejs. The link is img src="../public/images/wd.jpg"
The problem is that you are not passing the correct path to express.static. You need to change the root to the actual root, i.e.:
app.use(express.static("./path-to-views/public")
Then, you need to make sure to use the correct paths in your html, which will be as simple as:
src="/images/syringe-pill-capsule.jpg"
EDIT:
The root for express.static you were using is correct, i.e.
app.use(express.static("views")
But you need to adjust the paths in the images src attributes to the following absolute path:
src="/public/images/syringe-pill-capsule.jpg"
Newbie question as stated above. How do I access the public folder of laravel in .css file? I have a custom css and I want to get the url of the image.
You can not use the asset() or public_path() functions there, they will not get called from a css file but you can use the traditional way to access file like this
../css/want_to_import.css
This is the only way you can access a file in a css file, unless you're writting your css dynamically then possibilities are different.
If your domain points to your public folder, you can reference it using /
Let's imagine you want to display a JPG file as a background image.
public/image/background.jpg
In your CSS, you can use background-image:url('/images/background.jpg')
I want to write some stylesheet and use some backgrounds in larger project, but I don't know path where the graphics will be in future in the project. So I want to only prepare it, and paths will be replaced then.
I don't want to move graphics or stylesheets. Project is on C: using xampp and graphics on D: Question is how can I import the graphics?
I tried something like
background: url("file://localhost/D:/brig/task/image.png");
background: url("file://D:/brig/task/image.png");
background: url("D://brig/task/image.png");
Can I use absolute path like this??
Firstly I suggest you to use a WYSIWYG editor like dreamweaver, visual studio or any for instance.
Then make a project folder with the name brig and put all the relevant directories, images, etc inside it relevantly. Then when you open your HTML or css in the editor, select your main project and then when you put the images inside your HTML or CSS via src or url respectively, it will automatically make it relative and fetch it from that place where you have originally stored in your project.
For instance,
background: url("../task/image.png");
This ../ means a relative path for one level up directories. So in future, when you put your graphic files on the same path, this will fetch the images via a relative path as mentioned.
Hope this helps.
Your css is able to get pictures as long the path is still working just by navigating with ../../../etc. It should work with other partitions on the server as good as normal url paths from web. If the partition is not on your server, just make a folder at your webroot. It's not advisable to outsorce too much of your website.
Users can't access your file system, so css doesn't work with it. If you want to use the graphics from you d: you need to move them to the c: in the folder of your site. It can be in a subfolder.
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