Broken images when hosting laravel in subfolder - hyperlink

So I have hosted my laravel app in a subfolder lets now refer the root of my project as subfolder. I have a constant base file which has header and footer of the website, I used link of images as
<img src="/img/img1.png">
so it goes to domain.com/img/img1.png instead of domain.com/subfolder/img/img1.png
and if I do
<img src="img/img1.png">
it works fine for the first page but when I navigate to subfolder/user/1 my images brake again because now they are finding images on subfolder/user/1/img/img1.png. I remember once I ran into such situation and someone helped me to set the path of images by adding one line in the header of the website but now I am not able to find it.

Check your root Folder is correct

To avoid this problem, make use of asset() or url() function:
<img src="{{ url(img/img1.png) }}">
Edit: if you plan to attach "subfolder" in url path, then try to edit .htaccess file:
RewriteEngine on
RewriteRule ^/img/(.*)$ http://%{HTTP_HOST}/subfolder/img/$1 [L,R=301]
The code above searches the image /subfolder/img/img1.png when /img/img1.png is found.

Related

Image path showing wrong when run from iis

I am new to mvc. I have created one web application in asp.net-mvc-2.
src="../../images/1.jpg"
This is working when I debug from project but it is not loading from iis. Can anybody help me?
I will suggest you to use UrlHelper.Content Method, It converts a virtual (relative) path to an application absolute path.
Example
#Url.Content("~/images/1.jpg")
Here The ~ character matches the root of the site /.
<img alt="Picture Display" src="<%= Url.Content("~/images/1.jpg")" />
this solved my problem

How to rewrite Rails assets path?

I began moving all the assets in my site to S3 and ran into a problem with my asset path.
There's a WYSIWYG editor on my site that includes images by absolute path, so when you add an image, it doesn't use the rails image_tag helper but rather adds an image like this:
<img src="/system/images/image_1.jpg" />
The problem is that in production the URL /system/images/image_1.jpg leads to a non-existant file.
Naturally, two solutions are to 1) replace the URL dynamically (gsub) when it's called and 2) to loop through the database and replace the urls.
A better solution, however, would be to rewrite the /system/images/image_1.jpg url to point to S3. How do I do that?
Thanks!

Rails 3: How to prevent image caching when the image is specified in the CSS file?

Consider the following CSS:
.my_class {
background-image: url(/images/sprites.png);
}
Sometimes I change sprites.png by adding new sprites to it, so I don't want the browser to cache it.
One idea I thought of is to add style="background-image: url(/images/sprites.png?<random_number_here>)" to all elements with class my_class, and delete the CSS code above.
But, I don't like this solution because of maintainability issues (if for example the file name changes, I have to change it in many places, rather than a single CSS).
What other solutions exist to this problem ?
One way around this is to add a version string to your style directory.
<link rel="stylesheet" href="/css.1000/styles.css" type="text/css" />
Ensure that your css uses URLs relative to that directory. (In this example, the image directory for css links is css.1000/image)
.my_class {
background-image: url(images/sprites.png);
}
Then, use mod_rewrite to add a rewrite rule to the .htaccess file in your site's root folder, this will make any numerical path /css.1000/styles.css point to /css/styles.css on the server:
RewriteEngine On
RewriteRule css[\.][0-9]+/(.*)$ css/$1 [L]
Any time you change your site's assets, you change the version number of the folder in your stylesheet link.
I would suggest one of these two techniques:
Use Javascript to perform the cache update technique.
$('.my_class').ready(function() {
$(this).css('background-image',
$(this).css('background-image') + "?" + Math.random());
}
Use specific server content-control for your given page. This is from this StackExchange answer for nginx (similar techniques exist in apache):
server {
...
location = /images/sprites.png {
expires 1d;
}
...
}
These will both work to help mitigate your issue. Good luck!
Use rails asset pipeline (i.e. rails > 3.1), and it automatically does this for you via the fingerprinting mechanism:
http://guides.rubyonrails.org/asset_pipeline.html#what-is-fingerprinting-and-why-should-i-care-questionmark
Rename your mycss.css to mycss.css.erb and specify the images as:
.my_class { background-image: url(<%= asset_path 'image.png' %>) }
Rails will take care of everything else (you need to enable asset precompilation as well).

.htaccess - URL rewrite help

I have this code in my .htacess file :
RewriteEngine On
RewriteRule ^article/(\d.*) article.php?id=$1
When I open a link like this:
http://localhost/mysite/article/10
The page will open but no images, CSS, JS file loaded, I guess the problem is that pages are going to this URL article/10, so every URL in the article.php is changing to new URL even after redirect works.
How I can fix this problem?
This depends on where your resources are stored and how they are linked in your article, your article will need to point to something like http://localhost/mysite/image to reference an image without it being redirected by your script

How do I set the correct path in the jQuery script?

Dear all... I've been creating my website on another PC. Now I want to copy all PHP and jQuery files to my notebook... but all jQuery widgets does not show. How do I put the correct address in my script??
<link href="js/jquery.ui.all.css" rel=.....>
The files are at:
local disc(c:)/xampp/htdocs/js/jquery.ui.all
Since it's under the web root, just add a / before the path to make it absolute, like this:
<link href="/js/jquery.ui.all.css" rel=.....>
Then you put a path that's not fully qualified or absolute, it's relative to the page, so for example your current <link> would only work on a page in the root folder as well, for example:
/xampp/htdocs/page.html
With it absolute, it won't matter how deep the page is, it's looking for like this, regardless of the page path:
http://www.mysite.com/js/jquery.ui.all.css

Resources