Background disappear .htaccess - .htaccess

I just finished my .htaccess file, only rewriting to a nicer URL, but with no reason the background disappeared. If I access with the ugly old URL the background is there.
<html...
...
<style type='text/css'>
body { color:#FFF;background:#444 url(office_1.png); }
body { margin:0;padding:0; }
</style>
</head>
The .htaccess:
RewriteRule download/(.*)/u_id/(.*)/id/(.*)/n/(.*)$ download.php?on=$1&u_id=$2&id=$3&n=$4
RewriteRule download/(.*)/u_id/(.*)/id/(.*)/n/(.*)/$ download.php?on=$1&u_id=$2&id=$3&n=$4
RewriteRule download/(.*)/u/(.*)/id/(.*)/n/(.*)$ download.php?on=$1&u_id=$2&id=$3&n=$4
RewriteRule download/(.*)/u/(.*)/id/(.*)/n/(.*)/$ download.php?on=$1&u_id=$2&id=$3&n=$4
The .htaccess rule is working, but why my background disappeared?

The URI is relative, so it is looking for the image in
/your/nice/uri/office_1.png
Not in
/office_1.png
The usual fix is to start the image path with a / as I have in the above example to make it relative to the root of the site.
url(/office_1.png);

Related

Page not found "/" route

I'm trying to setup a VueJS app using Nuxt for server side rendering. However after deployment to my server the index.vue is return a 404 Page not found error.
This doesn't happen when run on my development machine, and still happens even if run in Development mode on my server.
All other routes work, and getting to the index route from within the app itself works fine. It just doesn't load when refreshed. Eg:
http://myapp.com/ Doesn't work
http://myapp.com/login Works fine
My pages folder currently looks like this:
- pages
-- index.vue
-- login.vue
I have nothing fancy set up within my nuxt.config file and have pretty much the same setup as is described in the Auth0 example
On my server I'm running nuxt with the command pm2 start npm --name "my-app" -- start Which runs fine without any errors, and I have the following .htaccess config:
RewriteCond %{HTTP_HOST} ^my-app\.com$ [OR]
RewriteRule ^(.*) "http\:\/\/127\.0\.0\.1\:3000\/$1" [P,L]
This is the error screen I get:
The page itself is very basic at the moment, it did have far more on it however I've cut it down to the following trying to debug this issue:
<template>
<v-container grid-list-md>
<v-layout row wrap>
<h1>Test index, trying to fix the 404</h1>
<h2>Hello, {{ loggedUser ? loggedUser : 'friend' }}!</h2>
</v-layout>
</v-container>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
computed: mapGetters([
'isAuthenticated',
'loggedUser'
])
}
</script>
I seem to have managed to fix this. However, I'm not completely sure on the cause the fix involved modifying my .htaccess. I started playing with the settings and ended up with the following which works well (for now at least).
RewriteCond %{HTTP_HOST} ^my-app\.com$
RewriteRule "(.*\.(jpg|gif|png|svg|js|css))$" "http://127.0.0.1:3000/$1" [P,NC]
RewriteRule ^(.*) "http\:\/\/127\.0\.0\.1\:3000\/$2" [P,L]
The rule for jpg|gif etc is required as they don't load when using the second rule.

htaccess make alias and rewrite rule

I have html in /html/test-html/index.html here. There are also css and images like this one: /html/test-html/css/style.css
When I open index.html in browser styles and images are loaded correctly.
When I'm trying to render it's contents by php echo function I get problems with 404 error, because paths in index.html and style.css are relative, like this one:
<link src="css/style.css" rel="stylesheet" type="text/css" />
So when I echo index.html contents in my script (i.e. by url like http://localhost/product1) browser tries to find style.css by this url:
http://localhost/css/style.css
But actually file is located in
/html/test-html/css/style.css
I think that good idea is to simulate URL like browser in http://localhost/html/test-html/, but actually we are in http://localhost/product1 (with RewriteRule), but without a redirect.
In other words, I want browser to think that http://localhost/product1 is http://localhost/test-html and server to think that http://localhost/product1 is http://localhost/index.php?r=product/view&id=1
Is it possible?

Get project base url that works in XAMPP and on production, considering .htaccess

I have a project that is not in the root of the XAMPP folder:
htdocs/my-folder/projects/my-project
htdocs/my-folder/projects/my-project/index.php
htdocs/my-folder/projects/my-project/js/
htdocs/my-folder/projects/my-project/css/
that folder contains an index.php file from where I try to call stylesheets and scripts. Initially, I'd just do it like this:
<script src="js/myscript.js"></script>
which worked. However, the project has expanded and now a user can "save" the current page (similar to how JSFiddle does it), and the URL will look different. Upon a first save a random string will be appended as a conf parameter, which results in something like this (locally) and should have a public equivalent:
localhost/my-folder/projects/my-project?conf=abcd # locally
http://mywebsite.com/projects/my-project?conf=abcd # publicly
Upon second save, the URL gets an additional parameters, a version number:
localhost/my-folder/projects/my-project?conf=abcd&v=2 # locally
http://mywebsite.com/projects/my-project?conf=abcd&v=2 # publicly
But, to get a nice URL I use this .htaccess:
Options +FollowSymLinks -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule (\w+)[/](\d+)$ ?conf=$1&v=$2 [L,NC]
which will result in something like this:
localhost/my-folder/projects/my-project/abcd/2 # locally
http://mywebsite.com/projects/my-project/abcd/2 # publicly
The thing is, when the URL is changed to some structure as above (without the parameters, but with the rewritten URLs, e.g. localhost/my-folder/projects/my-project/abcd/2) then the initial call to the resources (scripts, styles) in my index file won't be correct any longer.
In other words, if this is the url: localhost/my-folder/projects/my-project/abcd/2 then the server will look for a a script file in localhost/my-folder/projects/my-project/abcd/2/js/myscript.js, which is obviously wrong.
The question, thus, is: how can I get the absolute path to the current file, but that also works in XAMPP (so not __FILE__ or __DIR__ which will dig in the file strucure and return file://) and also on production environments.
You'll have to use the base element in your pages. The usage will be something like:
<base href="/projects/my-project/" />
for the public server and
<base href="/my-folder/projects/my-project/" />
locally.
I hackingly figured it out. By checking the end of the url, we determine if we are in root or if we are in a specific instance (ending with a digit e.g. /1.
<?php
// Is connection secure? Do we need https or http?
// See http://stackoverflow.com/a/16076965/1150683
$isSecure = false;
if (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == 'on') {
$isSecure = true;
} elseif (!empty($_SERVER['HTTP_X_FORWARDED_PROTO'])
&& $_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https'
|| !empty($_SERVER['HTTP_X_FORWARDED_SSL'])
&& $_SERVER['HTTP_X_FORWARDED_SSL'] == 'on') {
$isSecure = true;
}
$REQUEST_PROTOCOL = $isSecure ? 'https' : 'http';
$REQUEST_PROTOCOL .= '://';
// Create path variable to the root of this project
$path_var = $REQUEST_PROTOCOL.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
// If URL ends in a slash followed by one or more digits (e.g. http://domain.com/abcde/1),
// returns a cleaned version of the URL, e.g. http://domain.com/
if (preg_match("/\/\d+\/?$/", $path_var)) {
$path_var = preg_replace("/\w+\/\d+\/?$/", '', $path_var);
}
?>
Now we can use it in our PHP file!
<link href="<?php echo $path_var; ?>css/styles.css" rel="stylesheet">

Solving shortening url with htaccess

I have rewritten my url using htaccess .After navigating to the page, the layout distorts and no value fetched from the database is printed out.This is the main URL
http://www.deffsale.com/personalBusiness/PersonalBusiness.php?item=ladys%20Fashion&page=1
and I'm navigating to this page using this one
http://www.deffsale.com/personalBusiness/all/ladys-Fashion/1
This is my ht-access
RewriteEngine On
RewriteRule ^About-us AboutUs.php [NC,L]
RewriteRule ^personal-business personalBusiness [NC,L]
RewriteRule ^personalBusiness/all/([0-9a-zA-Z_-]+)/([0-9]+) personalBusiness/PersonalBusiness.php?item=$1&page=$2 [NC,L]
please help me solve this because it has been a disturbance past three months
You need to include this line just below <head> section of your HTML:
<base href="/personalBusiness/" />
so that every relative URL is resolved from that base URL /personalBusiness/ and not from the current page's URL.
It is a path issue with your CSS and images related to the rewrite rules. Add a rule like this before the other rules:
RewriteRule \.(js|css|jpe?g|png|gif)$ - [L]
which will allow those requests to be passed unmodified.
In addition, make sure the URLs for JavaScript, CSS and image files are coded relative to DocumentRoot. For example if your files are organized like this:
/ - index.php
+ css
+ base.css
+ color.css
+ images
+ logo.png
The style tags would be:
<link rel="stylesheet" type="text/css" href="/css/base.css">
<link rel="stylesheet" type="text/css" href="/css/color.css">
And images would be:
<img src="/images/logo.png" alt="logo">
As the other respondent suggested, you may use a base tag with relative URLs instead. In that case, you would code the tags like:
<base href="/">
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/color.css">
And images would be:
<img src="images/logo.png" alt="logo">
The difference is that the base tag can be used to set the reference point for the relative URLs. Bear in mind the base tag will affect all relative URLs on your page.

RewriteRule causes a malfunction of the other path (subdir), css/imgs/js

Like title, that rule:
RewriteRule pagtwo/pic/(.*) index.php?pic=$1 [PT,QSA]
Rule working, but not the file included by subdirectory for example
<link type="text/css" rel="stylesheet" href="css/base.css" media="all">
<img src="imgs/image.jpg">
and goes on
Directories are css, imgs and js, why they do not included correctly? Must I insert the absolute path for that directory?
Try adding this to you page header:
<base href="/">
Because you're using relative paths, what would normally resolve relatively from / won't woek when resolving relative from /pagtwo/pic/.

Resources