Vue : How to use v-bind on svg image? - vue.js

I tried to load a svg image on img tag in two ways. When I use the 1st way then it works well, but when I use the 2nd way then it doesn't work.
How to make the 2nd way(v-bind:) working well?
<template>
<div>
<img src="../../assets/ico_refresh-ccwb.svg"> <!-- 1st : working -->
<img :src="imgSrc"> <!-- 2st : not working -->
</div>
</template>
<script>
export default {
data(){
return{
imgSrc : '../../assets/ico_refresh-ccwb.svg'
}
}
}
</script>

#niddddddfier you need to prefix your imgSrc property with the require keyword. eg,
data(){
return{
imgSrc : require('../../assets/ico_refresh-ccwb.svg')
}
}

Related

How to add more than one attributes to an element dynamically in vuejs

I am trying to think of a way to add more than one attribute dynamically.
Below is a mockup code for that.
If I loop through attributes and try to add it to img tag then I'll have more than one image tag and that I don't want. I want to have all the attributes inside the array to be on the same element.
Any help would be appreciated.
<template>
<img />
</template>
<script>
export default {
data(){
attributes: [
{class: 'main'},
{src: '/somthing/img.jpg'}
]
}
}
</script>
You can use v-bind for that purpose. Example:
<template>
<img v-bind="attributes"/>
</template>
<script>
export default {
data(){
return {
attributes: {
class: 'main',
src: '/somthing/img.jpg'
}
}
}
}
</script>
If you would like to also dynamicly bind event's listeners you could use v-on same way as I did with v-bind

Why won't vue.js update the DOM?

Working my way learning about Vue. I chose it as the better alternative after looking at React, Angular and Svelte.
I have a simple example that its not working probably because I'm not getting/understanding the reactive behaviour of Vue.
Plain simple App:
<template>
<div id="app">
<app-header></app-header>
<router-view />
<app-footer></app-footer>
</div>
</template>
<script>
import Header from './components/Header.vue'
import Home from './components/Home.vue'
import Footer from './components/Footer.vue'
export default {
components: {
name: 'App',
'app-header': Header,
'app-footer': Footer
}
}
</script>
Where Home.vue and Footer.vue have plain HTML content on the template.
On Header.vue I have:
<template>
<div>
<h1>The Header</h1>
<nav>
<ul>
<li>Curr Player: {{ ethaccount }}</li>
<li>Prop owner: {{ propOwner }}</li>
</ul>
</nav>
<hr />
</div>
</template>
<script>
export default {
data() {
return {
ethaccount: 'N/A',
propOwner: 'N/A'
}
},
methods: {
update() {
var ethaccount = '0xAAAAAA123456789123456789123456789'
console.log('ETH Account: ' + ethaccount)
var propOwner = '0xPPPPPPPPPPP987654321987654321'
console.log('Prop Account: ' + propOwner)
}
},
mounted() {
this.update()
}
}
</script>
But I'm unable to get the header updated and unable to find what I'm doing wrong. Help.
If you need to read a little bit more about the reactivity of the datas in vuejs check this link : https://v2.vuejs.org/v2/guide/reactivity.html
If you need to access/change your data try to do it like that :
this.$data.ethaccount = 'foo';
this.$data.propOwner = 'bar';
For me the problem is taht you re-declare your variable locally by doing :
var ethaccount = "0xAA...";
By doing such you never change the value of the data you're accessing through your template.
Hope it will solve your problem.

Image path stored in variable doesn't render properly in template

If I used #/ in template, it works fine:
<img src="#/assets/images/image.png">
However if I use it in a variable, it doesn't: I just see it intact in the DOM (<img src="#/...">) which of course makes the image not render at all on the page.
Why?
<template>
<section>
<article
v-for="article in articles"
>
<img :src="article.imageUrl" />
...
</article>
</section>
</template>
<script>
export default {
data() {
return {
articles: [
{
imageUrl: "#/assets/images/AdobeStock_135975827_Preview.jpeg"
},
...
]
}
}
}
</script>
Because of the webpack, # and ~ only work in templete or import/require in script.
So, if you want to define url in a variable, let's use absolute URL.

Vue js dynamically render router link path

I'm struggling to find a way to render the path of the router-link dynamically, for example with the test variable. I'm trying to bind :to but unsuccessfully. I don't know if I can use the ternary operator in the binding as shown below:
<template>
<div>
<router-link
:to="{ test ? '/success' : '/fail' }"
tag="button"
class="btn-next">
<span class="btn-text">BUTTON</span>
</router-link>
</div>
</template>
<script>
export default {
// ...
data: function() {
return {
test: false
};
}
}
</script>
Your solution is close (you don't need the curly brackets). It should look like this:
<router-link :to="test ? '/success' : '/fail'">
demo

VueJS - Function to display image

I'm new to VueJS and having a hard to on this situation.
display.vue
<template>
<img :src="getLogo(logo)" />
</template>
<script>
export default {
methods: {
getLogo(logo){
return '../assets/'+logo;
}
}
}
</script>
I got an 404 error on that code.
But I tried not using the getLogo() function and it displayed.
<template>
<img src="../assets/logo.svg" />
</template>
The image structure is:
src/assets/logo1.svg
webpack.base.conf.js
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
Anybody here can help me displaying the image by using the getLogo function? Thank you very much!
I reckon when using v-bind:src it should be as follows
<img v-bind:src="'../assets/logo.svg'">
<!-- or shorthand -->
<img :src="'../assets/logo.svg'">
Notice the ' '
While using <img src="../assets/logo.svg" /> you do not need to bind a string, hence that's why it works.