I have an SSR application built in Nuxt. I am using renderRoute to render The Vue files since I need to send data to client side. Everything works fine but the static images are not being loaded in my application. I am using the following code to insert images in my vue file.
<img src="~assets/img/picture.png">
This may help
<img :src="require('#/assets/img/picture.png')">
Use dots to get relative parent folder path.
<img src="../assets/img/picture.png">
Or use # to denote parent folder.
<img src="#/assets/img/picture.png">
Related
I'm new to Nuxt and got confused about when to use app.vue or /pages/index.vue .When do I use either of them or what is the purpose of using index.vue if the starting point is app.vue .
app.vue is your main entry point, like main.js in Vue, the top level you can get access to if you want to have some thing across your whole app.
/pages/index.vue is used to generate some content on the home of your app aka /, this is mainly some vue-router path done for you.
In the same way, /pages/about.vue will generate a page for /about.
So, mainly all the router pages are contained within app.vue.
I have been reading about leveraging cdn to boost the speed of web application. I am developing a react application and I am using stylus for css. My current structure of project is something like this: Each component or page has it's own seperate local stylus file. So this way I am trying to keep the syles isolated for each component so that it is easy to maintain. But mostly all the stylus files has around 1000 lines of code which is common for all the stylus files. This brings down the speed of my application while it loads. I am thinking of putting the css on cdn. This way it will be faster I am assuming. How can I do it with my present project structure?
Right now I include stylus like this in each component
import c from "./reviews.styl"
render() {
return (
<div className={c.container}>
If I create a seperate css file as sugegsted in answer to include all the common css, how will I say to each component to use that common.css file. Each component is already using the imported stylus file like I shown above
You have a few ways here...
In the constructor you can append a link tag to the head
In componentWillMount you can append a link tag to the head
e.g.
document.getElementsByTagName('head')[0].appendChild('<link rel=stylesheet href=mycdn.com/mystylesheet.css />');
I'm not saying moving your CSS to a CDN is a good solution, but this is how you'd accomplish it.
The benefit of a CDN is that your static web assets are deployed across the world on multiple servers and your users can easily retrieve quick copies of these assets. In the case where you are using a file like jquery-x.js, users may already have retrieved the file from the CDN for another website and even on the first page load, they can use a cached copy.
Your biggest issue is the duplication of CSS code throughout each component's style page and that can be overcome by just creating a generic style sheet with the common styles (say "common.css") and then including it in each component. You don't have to use a CDN to achieve this and you can investigate CDNs after you first get rid of the duplicate CSS as another way to speed up your page load.
In Laravel 5, in what directory should I store images (for backgrounds) and how to access it inside a CSS file. My CSS file is on public/css directory. I've tried to place the image in public/images and public/assets/images but didn't work and even I couldn't access the image directly from web browser.
In CSS you can access images, when they are in public/images, like
../images/imgename.jpg
In the blade template, you can use something like
"{{ asset('images/imagename.jpg') }}"
public is fine. You should access them in your css file via, e.g., /images/xy.jpg or /assets/images/xy.jpg. The / at the beginning makes sense to refer to the root directory.
If this does not work, please provide paths of images, css and an example css file that does not work with the images.
All files inside of public/ are accessible via web browser, just put the images or css there. Example:
public/images/foo.png
public/css/style.css
Normally in this structure is only needed to do background: url('../images/foo.png').
However, some people has problems using absolute path like background: url('/images/foo.png'), why? because the laravel installation is made under htdocs/ or public_html/ having the following structure:
/home/user/public_html/laravel/public/
If the above structure is used by you, you need background: url('/laravel/images/foo.png')
You can just use : url(http://localhost:8000/imgs/image_name.extension) as follow my exemple : http://localhost:8000/img/spacer.png but pay atention do it in the dev enviroment in deploy change localhost:8000 for your domain name
For me the answer was to use a tilde (~) instead of dots:
So the full line in the CSS became:
background: url('~/storage/images/DownArrow.png') no-repeat right #fff;
The storage folder being in the public folder.
With Laravel 5.7 I had been running 'npm run dev' and getting:
Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve './storage/images/DownArrow.png' in 'C:\xampp\htdocs\websitename\resources\sass'
Thanks to 'mlachance' in another forum for the tip. He also says 'This is not well documented in the Vue CLI chapter on static assets.'
Am using This bootstrap CSS design it works fine but the images doesn't appear. I took from its github repository the css file and the index.html.
i didn't make any changes, and am using it with my meteor project. I already added twbs:bootstrap package. Are there any packages i need to add to my meteor project?
why the images doesn't appear with me?
Those images does not appear because you just copied the index the css, you are missing the rest of the assets (where images are stored). But for your own images, you shouldn't have any problem to add them.
I want to develop a usual website with Meteor.js (not one-page web app) and I want to load only specific css files for every page. So not all pages share the same css code.
Is it possible?
First off if you are using Meteor you are not building a "usual" site, you are building a very powerful SPA (single page application). You can imitate a "usual" website with introducing routing, try IronRouter.
OK now about CSS. Once you deploy Meteor all your CSS and JS are merged and minified. So if you want to achieve what you are asking you will need to add a package like this one.
https://atmospherejs.com/mrt/external-file-loader
https://github.com/davidd8/meteor-external-file-loader
Then attach it to trigger once a template is created:
Template.myCustomTemplate.created = function() {
Meteor.Loader.loadCss("//example.com/myCSS/style.css");
};
I believe you could also load the CSS from the Meteor server through Meteor's Asset API. Read more here: https://docs.meteor.com/#/full/assets
I found a simple solution. In your meteor project folder create a folder named "public" (no quotes). In that folder create a folder called "css" (no quotes). Put the CSS file in that folder.
In the html file which you want the specific CSS file to apply to do the following:
<head>
<link href="css/yourfile.css" rel="stylesheet">
</head>
Since the last part of your question says, "So not all pages share the same CSS code." you might consider using less and wrapping your template in a different div class.
For example
HTML file
<template name="page1">
<div class="page1css">
<p class="content">Page 1 content</p>
</div>
</template>
LESS File
.page1css {
.content {
font-size: 2em;
}
}
This way you can just wrap your pages and the corresponding css in the correct class.