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.
Related
I'm passing an image path to a child Vue component but get:
unexpected token: ':' in https://path.to.image/image.jpg
I've created a Vue sandbox that illustrates the problem.
HTML
<div class="js-product-map">
<product-map
:logo="https://path.to.image/image.jpg"
/>
</div>
Component
<template>
<div>
<img :src="image" />
</div>
</template>
<script>
export default {
props: {
logo: {
type: String,
required: true,
},
},
computed: {
image() {
return this.logo;
},
},
};
</script>
What am I doing wrong?
Can you clarify what it is you're trying to do exactly? Because it's not entirely clear to me.
The error you're getting is coming from this:
<div class="js-product-map">
<product-map
:logo="https://path.to.image/image.jpg"
/>
</div>
It's complaining about the : on the logo attribute. But I question why you're doing it this way to begin with. Typically you only want a single selector in index.html as the root of your app. Unless you're trying to have multiple Vue instances.
The way that you have your ProductMap component set up in your sandbox seems like it would accomplish what you're trying to do in index.html.
I was wondering how linking an local img in vue works (dynamic).
So what I do now is get the static link which will always be the same, with this src="../../../../public/groenten.png".(which works)
What I want to do is, get the image link from the prop "image".
which when I console log that image prop, I get the exact same link as the static one, which is great but when I try to switch my src to: :src="this.image" then my image wont show anymore.
<template>
<router-link v-bind:to="{ name: 'categoryPage', params: { category: this.title } }" class="itemlink">
<div class="category-item">
<div class="category-item__top">
<img
:class="imageClassName"
src="../../../../public/groenten.png"
alt="category"
/>
</div>
<div class="category-item__bottom">
<h3 class="category-item__title">{{ title }}</h3>
</div>
</div>
</router-link>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
name: "CategoryItem",
props: {
title: String,
image: String,
},
computed: {
imageClassName() {
return `category-item__${this.title.toLowerCase()}`;
}
},
created() {
console.log(this.image);
}
});
</script>
As far as I know, webpack is collecting static assets at compilation time. Even if at runtime the prop value is the same as the hardcoded one, it did not exist during compilation and it was not imported.
In order to import assets at runtime you have to explicitly call the require() function (webpack does the same thing during compilation):
<img :src="imageUrl" />
props: {
image: String,
},
computed: {
imageUrl(){
return require(this.image)
}
}
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')
}
}
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.
I'm facing an issue with my first Vue Project. I already googled for a while but can't find something very usefull.
I simply try to create a parent ("Files") and a child component ("Filelist") and use the Filelist in Files. This is not working as expected. I can't see the mistake, beacause i already added
export default {
name: 'Filelist',
The only hint I can get is from the browser console
[Vue warn]: Unknown custom element: <Filelist> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <Files> at src/docs/categories/Files.vue
<App> at src/App.vue
<Root>
and
./src/App.vue (./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue) 42:14-22"
export 'Filelist' was not found in '#/components/Filelist'
Thanks a lot in advance
The code of Files:
<template>
<div class="">
<h1>Hedajo</h1>
<Filelist :msg="sometext"/>
{{ sometext }}
</div>
</template>
<script>
import { Filelist } from "#/components/Filelist.vue";
export default {
name: "Files",
components: {
Filelist
},
data() {
return {
sometext: "hejo",
};
},
methods: {
}
};
</script>
<style scoped>
</style>
The code of Filelist:
<template>
<component class="">
{{ msg }}
<p>hewhwe</p>
{{ hedadi }}
{{ testi }}
</component>
</template>
<script>
export default {
name: 'Filelist',
props: ["msg"],
data () {
return {
testi: "hedadi",
};
}
};
</script>
<style scoped>
</style>
It's a default export, so you don't need to extract it. Try
import Filelist from "#/components/Filelist.vue";
You will need to register FileList as a component before using it.
<template>
<div class="">
<h1>Hedajo</h1>
<Filelist :msg="sometext"/>
{{ sometext }}
</div>
</template>
<script>
import Vue from 'vue';
Vue.component('Filelist', require('#/components/Filelist.vue').default);
....
You dont need the import Filelist statement in this case