I try to add a simple vue component for using it in .md file as explain in the vuepress documentation. I placed my HelloWord.vue in the .vuepress/components folder and then in my markdown file i call it with but nothing show up after running vuepress dev, does anyone had this problem before ?
How are you writing the component in your .md file?
For a component called HelloWorld.vue in .vuepress/components, you need to use:
<HelloWorld /> or <hello-world />
if it's in a subfolder inside components, you need to prepend that to your component name and I believe you then have to ensure you use the same format as the components file name.
So for a HelloWorld.vue component stored in ./vuepress/components/example/, you would use:
<example-HelloWorld />
Vuejs seems to follow this rule :
kebab-case such as <hello-world /> is accepted by default in HTML files (md files too since they will be rendered as HTML).
However, if you specify the name of the component in your .vue file, as follows :
<script>
export default {
name : 'PreviewPage'
}
</script>
Then, both <HelloWorld /> and <hello-world /> will be recognized.
Related
I try to use #nuxt/image with image from assets folder; when using image from static folder or external url, the image is optimised as well; but when on using it on image from assets like below:
<nuxt-img
src="~assets/img/Icone-accueil/row_left.svg"
alt=""
class="float-left margin-fleche"
quality="30"
/>
I have this result in my html
<img src="/_ipx/q_30/_nuxt/assets/img/Icone-accueil/row_left.svg" alt="" class="float-left margin-fleche">
but the image doesn't appear
Using #nuxt/image with images from the assets/ folder does not work.
The following is from the #nuxt/image documentation:
Images should be stored in the static/ directory of your project.
For example, when using <nuxt-img src="/nuxt-icon.png" />, it should
be placed in static/ folder under the path static/nuxt-icon.png.
Image stored in the assets/ directory are not proccessed with Nuxt
Image because those images are managed by webpack.
From nuxt documentation:
Inside your vue templates, if you need to link to your assets
directory use ~/assets/your_image.png with a slash before assets.
In your case:
<nuxt-img
src="~/assets/img/Icone-accueil/row_left.svg"
alt=""
class="float-left margin-fleche"
quality="30"
/>
Another quote from nuxt:
When working with dynamic images you will need to use require
<img :src="require(`~/assets/img/${image}.jpg`)" />
In your case check this out:
<nuxt-img
:src="require(`~/assets/img/Icone_accueil/row_left.svg`)"
alt=""
class="float-left margin-fleche"
quality="30"
/>
As per Nuxt Image doc, default direcrtory for images is /static, you can change it by update nuxt.config file as below.
e.g,
image: {
dir: 'assets/images',
},
Now you can rewrite as,
<nuxt-img
src="/Icone-accueil/row_left.svg"
alt=""
class="float-left margin-fleche"
quality="30"
/>
This worked for me:
< img :src="require (~/assets/image.jpeg)"
alt=""
/>
For Nuxt3 users whom are using the edge version, which is v1, of nuxt/image,
if you are self-hosting, place images in the 'public' directory as opposed to 'static'.
Quote from v1 docs:
With default provider, you should put /nuxt-icon.png inside public/ directory for >Nuxt 3 make the above example work.
v0 (Nuxt2)
/static/images/myImage.jpg
v1 (Nuxt3)
/public/images/myImage.jpg
Then, access images in the same way others have described. Nuxt/image v1 does not seem able to read a dir named static and of course doesn't read assets as that is used by Webpack.
so I seem to be a bit confused on how to work with images in webpack encore + assets.
I store all JS & CSS like this
/assets/js
/assets/css
...
With encore I can access them later from my /public/build folder - no issues there.
Now I want to store some images (e.g. file upload).
First idea was to store them inside a folder like /assets/images. But with the current settings & using assets I can only access files inside /public/build folder.
So I tried to use to copyFiles to copy everything from /assets/images to /public/build/images.
But this does not automatically copy my files (e.g. file upload to /assets/images/ does not copy it to /public/build - which is in order not accessible in my project). So I would need to run manually encore - which I don't want.
Second idea was to store the uploaded images directly inside /public/build/images but those files would be deleted when I run encore.
Next I disabled the webpack option cleanupOutputBeforeBuild, so images would not be deleted. But without this option the folder will be flooded by new JS & CSS Files everytime I run encore.
What do I need?
A solution to store my images either way in /assets folder & make them available for my project.
or
store the images directly in /public/build folder without encore deleting them nor flooding the folder with JS/CSS by disabling cleanupOutput Option.
Thanks in advance ~Syllz
If u need to use it in JS, just require the file:
// assets/app.js
import logoPath from '../images/logo.png';
let html = `<img src="${logoPath}" alt="ACME logo">`;
When you require an image file, Webpack copies it into your output directory and returns the final, public path to that file.
If u need using it from a templates:
You need to install file-loader to use copyFiles()
yarn add file-loader#^6.0.0 --dev
then enable it in webpack.config.js:
.copyFiles({
from: './assets/images',
//optional target path, relative to the output dir
//to: 'images/[path][name].[ext]',
//if versioning is enabled, add the file hash too
to: 'images/[path][name].[hash:8].[ext]',
//only copy files matching this pattern
//pattern: /\.(png|jpg|jpeg)$/
})
then use it in your twig template:
<img src="{{ asset('build/images/logo.png') }}" alt="ACME logo">
more details in Symfony documentation
You can use the CopyWebpackPlugin to do this. You can read this post for more details.
Solution to my problem:
Store the images into /public/images and not into the build folder - which will be deleted when running encore.
In my html page I am referencing static assets like:
<script src="/static/assets/js/bundle.js"></script>
and
<link rel="stylesheet" href="/static/assets/css/style.css">
These files are stored in:
/assets/js/bundle.js
/assets/css/style.css
Currently my route looks like this:
app.PathPrefix("/static/").Handler(http.StripPrefix("/static/", http.FileServer(http.Dir("/assets"))))
Currently it is not working and returning a 404 not found error when I look at chrome console.
What am I doing wrong here?
The problem is with your call to http.Dir("/assets") in this line:
app.PathPrefix("/static/").Handler(http.StripPrefix("/static/", http.FileServer(http.Dir("/assets"))))
http.Dir takes the path to the folder either in absolute form or relative to where the go executable is. Using "/assets" tells it that the absolute path to the assets folder is on the root of the file system, where in reality I'm guessing the assets folder is in something like /home/YOUR_USER_FOLDER/code/this_project/assets.
Just change the code to use the absolute path:
app.PathPrefix("/static/").Handler(http.StripPrefix("/static/", http.FileServer(http.Dir("/home/YOUR_USER_FOLDER/code/this_project/assets"))))
If the assets folder is in the same location as the go executable, you can just use "assets" as the file path, but I will recommend using the absolute path to avoid any confusion.
where do you copy the image in order for the following commands to work?
<b-img :src="require('../static/picture.jpg')" />
<b-card-img :img-src="require('../static/picture.jpg')" />
I got the following code from the vue bootstrap website Vue Bootstrap
I wanted to try this out instead of making a lot of changes to the transformToRequire option.
partial directory layout for a vue project:
myProject | src | components (.vue files located in components directory)
Path are relative to the file where you write your require.
So lets says the your script is in ./src/components/myComp.vue your file would be lookup in ./src/static/picture.jpg
The purpose of transformToRequire is not to manage asset location although it might issue error if path is not set properly. transformToRequire is only a syntactic sugar from src="..." to src="require(...)" and let webpack do the rest.
There is also an alternative if you don't want to border where your file is, especially when your are moving file around.
In webpack you set an alias for some path typically:
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js',
'#': resolve('src')
}
},
So that you can use:
<b-img :src="require(#/static/picture.jpg)" />
Based on the structure you gave, you would have a static folder in src where you put your images.
But do note that require is relative to the currently file.
I am new in CI - and the framework is awesome.
These are the best answers I can get:
- CodeIgniter: How do I include a .js file in view?
- Codeigniter: How to include javascript files
I am trying to include js/css files but:
My CI folder including application and system are not installed on the http(/var/www/)[for default installation] folder, I placed somewhere else. So i assume their installations above are in http default folder, I have :
http:/var/www
CI:
/opt/codeigniter
+aplication
+system
Thank you so much in advance
Use this code
<script href="<?php base_url().'path/to/file' ?>" type="text/javascript"></script>
The javascript folder should be outside the application folder
app_folder
-application
--views
--controllers
-system
-css
-js
Hope this helps