I created a blog in Nuxt.js which uses Markdown for my articles. When writing my first article, I realized I can't include images in my markdown article from my assets folder. It only works if it's a link like the example below:
Markdown Image:
How can insert an image in Nuxt.js Markdown from this location? assets/images/blog/trees.png
In your vue files, you can access images in assets folder with:
<template>
<img src="~/assets/your_image.png" />
</template>
In markdown file, you can do the same with Markdown syntax:
But as your files in content folder is independent of webpack, you have to run nuxt generate each time you add a file in assets folder.
More info here:
https://nuxtjs.org/docs/2.x/directory-structure/assets/
https://github.com/nuxt/content/issues/106
place your images in static folder with this path :
static/images/img1.png
In markdown file, use this syntax:
In vue files, use like this :
<template>
<img src="/images/img1.png" />
</template>
or for use with content :
1- in content/articles/new-post.md :
---
title: Title
description: This is description
img: /images/img1.png
alt: Article 1
---
## Example
2- in vue file (pages/index.vue) :
<template>
<div>
<div v-for="article of articles" :key="article.slug">
<h1>{{ article.title }}</h1>
<img
v-if="article.img"
class="h-48 xxlmin:w-1/2 xxlmax:w-full object-cover"
:src="article.img"
/>
</div>
</div>
</template>
<script>
export default {
async asyncData({ $content, params }) {
const articles = await $content('articles', params.slug)
.only(['title', 'description', 'img'])
.fetch()
return {
articles,
}
},
}
</script>
notes :
place your images in static folder for example (static/images/*)
use '/' in start of addresses
true => /images/img1.png
false => images/img1.png
Looks like relative paths are not currently available: https://github.com/nuxt/content/issues/693#issuecomment-750412810
Only absolute paths should work after placing the image in the /static directory
Related
I'm working with Nuxt and Vue.js and I'm trying to render some svg's to the page. But I keep getting the following
Don't mind the pink, that's from another element. I tried installing #nuxtjs/svg and I added it to my modules in my nuxt.config.js and it says it's supposed to work right out of the box. But for me it isn't. What am I doing wrong?
flagPath returns /vector/icons/flags/united_kingdom.svg and that's where they are located. It works fine with png's in the same folder.
<template>
<div>
<img :src="flagPath" width="70" height="38" />
</div>
</template>
<script>
export default {
props: ['default'],
data(){
return{
folder: '/vector/icons/flags',
fileName: {'uk' : '/united_kingdom.svg', 'south-korea' : '/south_korea.svg'},
}
},
computed:{
flagPath: function()
{
return this.folder + this.fileName[this.default];
}
}
}
</script>
If svg is in the assets folder, simply writing the path will not work
Because it goes through webpack
https://nuxtjs.org/docs/2.x/directory-structure/assets#images
:src="require('~/assets/...')"
Try this when it's in the static directory:
<img src="/vector/icons/flags/united_kingdom.svg" width="70" height="38" />
When you wanna reference static files inside HTML you can simply reference them with a forward slash.
I have been trying to import an image asset relative path to a banner component. The following works just fine.
<b-img src="~/static/images/carousel1.jpg" alt="Samyojya Consultants banner"/>
On html, I see it rendered as this
<div class="card-body"><img src="/_nuxt/static/images/carousel1.jpg"...
But the v-bind style representation like this does not bundle the image
<b-img :src="imgSrc" :alt="title+'banner'"/>
I can see on the html that imgSrc value is passing on but not compiled by asset processor
<div class="card-body"><img src="~/static/images/carousel1.jpg" ...
Is there a way we can explicitly trigger this compilation? require doesn't seem to work too.
<b-img :src="require(imgSrc)" :alt="require(title)+'banner'"/>
This dynamic style is needed for my use-case.
Create a computed prop (or method, or similar) to resolve (require) the relative path:
export default {
data() {
return {
title: 'Image title'
}
},
computed: {
imgSrc() {
// Relative to component directory
return require('./image.png')
}
}
}
And then reference that in your template:
<b-img :src="imgSrc" :alt="title+' banner'"/>
On the calling (parent) template, I used this
<banner :imgSrc="imgSrc" ...
And the data export in parent like this.
export default {
data: function(){
return {
imgSrc:require('../static/images/carousel2.jpg')
}
},
...
In the child component where the banner is drawn.
<b-img :src="imgSrc"...
Note: require needs a relative path (../static) from components/pages while without require we can use absolute (~/static).
<b-img :src="require('../static/images/carousel1.jpg')" alt="Samyojya Consultants banner"/>
How do i link/redirect to a html page that has it own cdn in vue.js
These html page are some old project that i made in the past that i want to link to.
I have only install the webpack-simple and vue-router.
<div id="navMenu">
<ul>
<li class="project">
<a :href="publicPath + 'project/projectOne/drone.html'">Drone</a>
</li>
</ul>
</div>
The script
<script>
export default {
data () {
return {
publicPath: process.env.BASE_URL
}
},
methods:{
}
}
</script>
Assuming these are static files, separate from your Vue project, that you don't need to run through webpack, and that you're using vue-cli for scaffolding:
Put the static files inside the public directory (at the root level of your project). Anything you put in there will be copied directly into the dist folder at build -- so public/foo.html would wind up at the root level inside dist; /public/project/projectOne/drone.html would wind up in /dist/project/projectOne/drone.html, etc.
Link to those files from within your Vue project as you would any normal external site or file (using the project BASE_URL if necessary):
<!-- assuming the source file is in /public/project/projectOne/drone.html -->
<a :href="publicPath + 'project/projectOne/drone.html'">Drone</a>
export default {
data () {
return {
publicPath: process.env.BASE_URL
}
}
// ...
I have the following Vue component:
<template>
<div id="wrapper">
<div class="main-container">
<Header />
<router-view/>
<Footer/>
</div>
</div>
</template>
<script>
import './assets/js/popper.min.js';
// other imports
// ....
export default {
name: 'App',
components : {
Header,
Footer
},
mounted(){
// this is syntax error
import './assets/js/otherjsfile.js'
}
}
</script>
As is clear from the code snippet, I want to have the otherjsfile.js loaded in mounted() hook. That script file has certain IIFEs which expects the html of the web page to be fully loaded.
So how do I invoke that js file in a lifecycle hook?
This is the pattern I use. The example is importing a js file which contains an IIFY, which instantiates an object on window.
The only problem with this would occur if you want to use SSR, in which case you need Vue's <ClientOnly> component, see Browser API Access Restrictions
mounted() {
import('../public/myLibrary.js').then(m => {
// use my library here or call a method that uses it
});
},
Note it also works with npm installed libraries, with the same path conventions i.e non-relative path indicates the library is under node_modules.
I'm a little unsure of what your asking. But if you are just trying to include an external js file in your page, you can just use the script tag in your template and not have to put anything in your mounted function, like this:
<template>
<div id="wrapper">
<div class="main-container">
<Header />
<router-view/>
<Footer/>
</div>
<script src="./assets/js/otherjsfile.js"></script>
</div>
</template>
<script>
import './assets/js/popper.min.js';
// other imports
// ....
export default {
name: 'App',
components : {
Header,
Footer
},
}
</script>
Does this solve your issue?
I am working on a vue project and I need to embed a documentation inside a vue template ideally. I considered using vuepress for making documentation as it has a full-fledged theme for documentation which is perfect for the kind of documentation I want and also supports markdown to write documentation. I tried using vuepress but only includes components written in .vuepress/components folder. Is there a way I can include other vue components of my project inside the markdown files or output the markdown files as vue templates instead of static html files.
You can use the string tag in your markdown file just as you would do in a regular vue project with webpack. For example:
on README.md:
# This is a title
## This is a subtitle
<my-component></my-component>
> My name is {{ name }}
<script>
import myComponent from '../myOtherFolder/MyComponent'
export default {
components: {
'my-component': myComponent
},
data: function() {
return {
name: 'John'
}
}
}
</script>