Set project root directory for Tailwind CSS in PhpStorm - phpstorm

I can't find the way to set proper project root directory for Tailwind.
For example, I have a project in ./PhpStormProjects/new-project directory. So when I start any .php file in the browser from PhpStorm the browser will only find background image sources that was set as /new-project/image-directory/image.jpg in css file. And I want to set it as /image-directory/image.jpg.

Related

html relative path not working even though vs code displays the image using the relative path

i am practicing html using my computer and i run the html file using the "Live Server" add-on in vscode. the image doesnt show up with the relative path:
<img src="../html/images/coffee background.jpeg" alt="tx"/>
my root folder is the css folder, which i have opened in vs code. index.html is stored in this css folder.
the image is stored in the images folder inside the html folder, which is stored in the folder above the css.
using inspect element on the img link in the browser this shows up: Cannot GET /html/images/coffee%20background.jpeg
i'm pretty sure this relative path is correct because when i click "follow link" in vs code when i hover over the link, the image shows up in vs code. why isn't the image displaying when i run the html file?
In a Web server, you cannot get lower than the Web root, while in VSCode, you can (you can drill down to the disk root, I imagine).
So when you say,
my root folder is the css folder, which i have opened in vs code.
index.html is stored in this css folder.
this means that you cannot enter a "sibling" folder of css. Just as, when running and your root is /var/www/customer1_pages, you obviously cannot access "../customer2_pages/passwords.txt".
../html/images (but also ../../../html/images etc.) is the same thing as /html/images, and (for the web server) means <ROOT>/html/images, which in your filesystem would be css/html/images.
You need to set the root folder to html, and place the index there. Or move images inside css.

Why Image file path not working in bootstrap?

My Folder directories are as described below
Root Directory: G:/bootstrap/index.html
Image directory: G:/sample.jpg
I wanted to link my image like this. But image path is not working properly. I have added Bootstrap CDN in head section.
But browser is not showing image properly. What may be the reason.
Browsers aren't allowed to access local file in the format you are trying. Rather access the file like this: file://G:/sample.jpg

How do I link to an image from a folder outside of my localhost

I am working on embedded website that will be served by a device running Linux. We are trying to maintain a system where editable items are in root/var/data/.. and static files are in root/opt/..
Right now my server.js is located at root/opt/webapp/server.js, i have an html file at root/opt/webapp/html/file.html
in the file.html i need to render images that are in the root/var/data folder, but my understanding of now this works is node considers localhost at root/opt/webapp(the location of server.js) how do I tag to a file that is outside of said local host but still within the file directory of the device?
I attempted an absolute path but the html just assumed that it should start the chain from localhost so
looks at http://localhost:8080/file:/C:/projects/root/var/data/fms/share/icons/avocado.png
The var folder is two folders up from your .html file, so it sounds like you're looking for either:
../../var/data/fms/share/icons/avocado.png (relative)
/root/var/data/fms/share/icons/avocado.png (root-relative)
It depends on how you're linking to the file, but you may also be able to use the absolute path relative to C::
file:///C:/projects/root/var/data/fms/share/icons/avocado.png

How to organize the directory of a basic website

I've got a basic website, 100% frontend. It resides in a folder somewhere on my computer during development, and will be hosted on a free webhost. The index.html is in the main directory. There's also a css, js, img folder in the main dir. Because this is a Windows PC, this folder is not the root directory (C:) and I'd rather not have my website in the root dir.
I've noticed that if I put a url in a css stylesheet located in C:\filepath\mainprojectfolder\css\, like so
background: url("img/image1.jpg");
This is interpreted as C:\filepath\mainprojectfolder\css\img\image1.jpg (Interpreted as starting from the same folder that the stylesheet resides in), when the actual file is in \mainprojectfolder\img\image1.jpg, and having url("/img/image1.jpg") will be interpreted as C:\img\image1.jpg
How do I properly organize my website directory? Is there a standard for this? I have no idea how this works on an actual web server, but since this is a simple website, I'd expect that this works the same on both my regular computer and a webhost.
Project Folder
html files You put the html files in the project folder not a dedicated html folder
css folder
javascript folder
fonts folder
images or img folder
hope that works

Define Root Folder for Project Sites

I am using WAMP and I have multiple site projects.
When accessing files within my CSS or HTML I'd like to use the root selector /index.html however this is not working. Is there a way I can define root for a project? I've tried researching this but haven't found anything.
For example, in WAMP I have
-www/project1/FOLDERS FOR SITE like images, javascript, css, etc.
I am currently in the css folder and am trying to reference a image file in the images folder.
background: url('/images/background.png') repeat;
this should reference root directory > images > background.png
How do I define the root directory?
If you are try to go from lets say this file:
rootFolder/newFolder/example.html
to:
rootFolder/index.html
In example.html, you can do ../index.html and that will be able to access index.html.
"../" goes a folder higher.