I am using the Laravel framework with npm.
In the scss file i have image path:
background-image: url("../../img/frontend/payments.png");
by compilation when I open the styles.css and look for that image the path is the following:
background-image: url(/images/payments.png?464788fabc66a26cf02344b0dcbcdde2);
How can I change that path, because all my images are in img/ folder.
There is another thing which is bothering me. I need to copy the payments.png in the resources/sass folder, which is copying tha that picture in public/images. So i have the duplicate of each picture. Is it somehow possible to stay all my images in the public/img folder ?
If you're using Laravel mix, the urls change because of the webpack url processing.
You can read more about it in the official documentation.
tldr
mix.options({
processCssUrls: false
});
And about the duplicate resources (like the pictures you mentioned): Keep the original resources in the resources directory and copy them using Laravel mix to the public folder. The reason behind this is sometimes you want to process the resources and then copy them. for example first optimize the png files then copy them to the public folder while keeping the original file in the resources directory.
Related
I've deployed my website using Heroku. I am also using Vueper Slides which needs a variable, which is an array, containing the path to the image. On the live website I noticed that it does not contain the images folder contained in my dist folder. What can I do to fix this?
Javascript array variable:
dist directory:
Heroku source files:
This is not a definite answer, but can help.
I noticed you are using the public folder where you keep your images.
you may want to double check that the path is correct because it should just load stuff within the public folder.
However, I don't understand why it doesn't load in the images folder from dist.
I started using Laravel Mix as a Webpack for my web development projects, and so far, I'm finding it a perfect tool for my projects, but I wanted to make some aspects a little more organized; when I minify the CSS file, it minifies the file in the same folder where the example CSS file is:
Before:
stylesheets/main/style.css
After:
stylesheets/main/style.css and stylesheets/main/style.min.css
In this case, I wanted to put the minified files in a folder called minify to look like this.
stylesheets/minify/style.min.css
The Laravel Mix website says that the file is automatically created inside the destination folder of the file, and I would like to change this behavior. Is there any way or some extension that can help me change the file's destination?
Here is my code:
// webpack.mix.js
let mix = require('laravel-mix');
mix
.sass('stylesheets/sass/main.scss', 'stylesheets/main/main.css')
.minify('stylesheets/main/main.css');
// Change destination not working
//.minify('stylesheets/main/main.css', 'my-destination');
I have a static image cache problem in the browser.
I am displaying an image from the static folder in my project and when I change the content of the image without the image name change, the browser cannot detect it.
I want Nuxt to cache this image based on the modified date, or somehow detect this change and display the image over. is there a solution to this?
Actually nuxt does this out of the box - at least in the production builds and when you load the images from the assets folder.
For assets in the assets folder, webpack generates a hash and appends it to the filename at build time. If the content of the image changes, the hash changes as well. This way the browser knows when to load the updated image from the server.
Check here for reference: https://nuxtjs.org/docs/directory-structure/assets/#webpack
The static folder is not processed by webpack by default and therefore the hash is not added to the filename.
So try to make use of the assets folder, then the caching problem should be solved.
I'm new in Laravel framework and I'm having trouble on font-awesome. Icons are not showing or it's just showing rectangles. I install font-awesome using npm. I already added below code on my resources/sass/app.scss as well.
$fa-font-path: "../fonts/" !default;
#import"~font-awesome/scss/font-awesome";
Still I'm getting this error.
I don't know why that path is incorrect. Co'z my project is located in this path:
http://localhost/Examples/Laravel/proj-3/
Addition:
I found out that inside public/css/app.css #font-face{} src is incorrect as well. It should be src: url(../fonts/vendor and not src: url(/fonts/vendor.
Thank you in advance.
Where are those folders? You can show an image of the folder directory, because laravel you have private folders and public folders, if you need call any font or css this need are in public folder and not in the private
I Had same problem.
Just copy fonts files in public/assets/fonts
I am creating a project wherein the user can upload his photo. This photo is stored in the folder "images/uploads/filename". When his profile is created and the photo is to be shown, I use the <img> tag with src as "images/uploads/filename", but the photo does not show up.
If I manually copy the photo to an adjacent folder "images/abc/filename" and then use it as the source then it works.
How is this caused and how can I solve it? I need to use the same folder to upload and download photos.
That can happen if you're running the webapp as an IDE project and are storing the uploaded images in the IDE's project space. Changes in the IDE's project folder which are performed externally (as by your servlet code) does not immediately get reflected in the deployed server's work folder. Only when you touch it (by refreshing the project) or by copying it (as you happen to have found out), then it will get reflected.
After all, storing uploaded files in the webapp's deploy folder is a bad idea. Those files will get all lost whenever you redeploy the webapp, simply because those files are not contained in the original WAR file.
You need to store them somewhere outside the webapp's deploy folder on a different fixed path like /var/webapp/uploads. You should not use relative paths or getRealPath() to create the File object around it. Just use a fixed path. You can always make the fixed path configureable as a context param setting, a VM argument, a properties file setting or even a JNDI entry.
Then, to serve it to the world wide web, just add exactly that path as another docroot to the server config. It's unclear what server you're using, but in Tomcat it's a matter of adding another <Context> to the server.xml.
See also:
Uploaded image only available after refreshing the page
How I save and retrieve an image on my server in a java webapp
Make sure your have the correct path and include the image extension
just for testing, put your img tag inside the index.php
<img src="images/abc/filename.jpg">
/root/index.php
now put you image in to the your abc/ folder
/root/images/abc/filename.jpg
This should display the image.
if you have your img tag inside another folder in the root like below
/root/user/index.php
now when you use you img tag use this path (relative link):
<img src="../images/abc/filename.jpg">
note the beginning of the image path "../" this is used to go back to the root.
if the php or html file that is holding the img tag is even deeper, just remember to add ../ for every level, 2 folders deep whould be:
<img src="../../images/abc/filename.jpg">
Question was quite vague so hope this is what you are looking for.
let me know and if this is wrong, explain a little more and i will try to help :)