What do I have to do to use a nuxt-link as an image?
When I display an image in Vue, I usually do:
<img src="~assets/icons/filterLinkButton.svg">
but when I do the same with a nuxt-link, the path to the file does not get evaluated.
# this is not working
<nuxt-link
tag="img"
src="~assets/icons/filterLinkButton.svg"
to="/locations">
</nuxt-link>
What can I do to solve this?
EDIT:
It works though if I do:
<template>
<nuxt-link
:src="image"
tag="img"
to="/locations">
</nuxt-link>
</template>
<script>
import image from '~/assets/icons/filterLinkButton.svg'
export default {
data() {
return {
image: image
}
}
}
</script>
You can do without a variable in data.
# this is working
<nuxt-link
tag="img"
:src="require('~/assets/icons/filterLinkButton.svg')"
to="/locations">
</nuxt-link>
According to this link, the tag prop is deprecated in vue-router 4 and should be replaced with v-slot. So arkadij_ok's answer would now look like this:
<nuxt-link
v-slot="{navigate}"
to="/locations"
>
<img
:src="require('~/assets/icons/filterLinkButton.svg')"
role="link"
#click="navigate"
/>
</nuxt-link>
I have used an image as a nuxt-link by placing the image inside of the nuxt-link tag.
a screen shot of a nuxt-link with an img
The html viewed with chrome dev tools
Well according to the documentation if you're using webpack you can use that alias (~assets) inside your css files, but apparently you need to use the ~/ version on your template, also take a look at the approach bellow using the static folder I think that suits you better since the asset you used in your question can be placed in the static folder and get rid of the alias
Related
I have I think a small issue but I can't resolve it since more than 2 hours ...
I have a VueJs application and I'm trying to display an image that came from an API.
In my register.html I have that code :
<img :src="'./assets/' +nation.drapeau"/>
When I check the browser I see the correct path './assets/images/drapeaux/AFC/Australie.png' but nothing is displayed !!!! Why ? My path is not ok ?
What I'm doing wrong ?
This is the structure of my VueJs folder
If you use dynamic src, you have to use require. It is handled by webpack and it knows to put it in dist after build.
<template>
<div>STATIC IMAGE</div>
<img src="./assets/logo.png" />
<div>DYNAMIC IMAGE</div>
<!-- <img :src="'./assets/logo.png'" /> IT DOESN'T WORK-->
<img :src="require('./assets/logo.png')" /> <!-- IT WORKS-->
</template>
Demo:
https://codesandbox.io/s/dazzling-leftpad-i3stg?file=/src/App.vue:0-281
Another source:
How to import and use image in a Vue single file component?
Try using require since it's a dynamic src
<img :src=require(`./assets/${nation.drapeau}`)/>
The response , thanks guys :
<img :src="require('#/assets/' +nation.drapeau)"/>
I am facing a very interesting problem. I am returning some html from server as json. My return html string look like this
str2: " <span class="card_top_com_span link_color" ><router-link to="/profile/sadek3/about">numan sir</router-link> </span></span>, <span class="card_top_com_span link_color" ><router-link to="/profile/sadek3/about">sadek mia</router-link> </span> and 4 of your firiends commented on this post"
This is returned from server. Now I want to add some spa link.
It can be nuxt link, #click event for routing or a </router-link>
I am using v-html in my front end to out put html. It does output correctly.
Is there anyways of doing this?
Thank you.
As said in the comments, it's way better to respond from your server with structured JSON data. However, you can make it work, but you need to use a <component></component>. Just using v-html won't work if you have router-link:
<div id="app">
<component :is="{template: theString}"></component>
</div>
new Vue({
el: '#app',
data: {
theString: '<h3>Something Cool</h3>'
}
})
https://jsfiddle.net/to8smxfb/
PS: You also need to make sure that theString only contains one root element. You can wrap your string into <div></div> for example.
I am having trouble displaying images in my Vue CLI project.
Here is what I have going on. This vue file accesses a json file with a few references to the individual Eyewear objects, all that works. I have references to the image I am trying to access in the json file. And with the current code, I can see the correct image reference in the browser, but it does not load the image. Is it something to do with webpack or another loader needing to load the image file?
<template>
<div>
<h1 id='callout'>Select Your Eyewear</h1>
<div id='item' v-for='item in items' :key=item.id>
<img :src='`..${item.images.frontal}`' alt='eyeware' />
<ul id='itemLIist'>
<li >
{{ item.brand }}
</li>
<li>
{{ item.name }}
</li>
</ul>
</div>
</div>
</template>
<script>
import items from "../assets/eyewear.json";
export default {
name: "ItemList",
data: function() {
return {
items: items.eyewear
};
}
};
</script>
<style scoped>
</style>
I don't know this works for you or not. But in my case providing the full path of the image works for me. in your screenshot reference starting from "../assets" instead of that try something "src/assets" (Full path with out dots)
and for make this simple, first just try to hard code full path src to a image tag and see whether it's working or not.
and let me know if this works for you. =)
I'm creating a website with Vue.js + Vuetify.js
If I simulate "3G" in developer tools I can see all the elements of the App.vue page (toolbar, drawer,elements of routed pages) displaying without CSS during loading.
I preview it with webpack/localhost hot reload npm run dev
I want the spinner to load first and then the rest of the elements (with CSS). How do I do it properly?
I tried v-cloak and it isn't working. Looks like It's for hiding the {{ }}.
project structure
index.html |
<div id="app"></div>
App.vue |
<v-app>
<loader></loader>
<div :v-show="false">
...
<v-toolbar>...</v-toolbar>
<router-view></router-view>
</div>
</v-app>
these methods on the App.vue page doesn't seem to solve the problem:
created: function () {show: true}
mounted: function () {show: true}
P.S. I'm a newbie, so it's possible that I'm missing some small detail preventing it from working properly.
Question:
Could someone please show a proper way of doing it?
Try this way:
<v-app>
<loader></loader>
<div v-show="false">
...
<v-toolbar>...</v-toolbar>
<router-view></router-view>
</div>
</v-app>
I think the v-show didn't work, bacause you use colon before, it's like passing a dynamic prop to the component instead of using v-show directive :)
How can I bind HTML to a Vue component property?
In my PHP script I have:
$html = '<div>some text</div>';
$box = "<box_includes
html_text='$html'
></box_includes>";
In my vue template:
<template id="template_box_includes">
{{ html_text }}
</template>
But in my browser I see all the text, including the tags, It's being recognized as a text:
<div>some text</div>
EDIT 2019:
Below answer is outdated as stated by #devman in the comments. Please use v-html instead:
<template v-html="html_text"></template>
Older Answer
In Vue JS, the use of the double braces are escaping HTML. You need to use three to avoid escaping html like so:
<template id="template_box_includes">
{{{ html_text }}}
</template>
You can learn more on this page of the documentation: http://vuejs.org/guide/syntax.html#Raw-HTML
I hope this helps!