Static image src in Vue.js template
My Vue component contains some images. I want to do lazy-loading later, so I need to set the src of the images to a small image, first.
-
This solution is for Vue-2 users:
- In
vue-2if you don't like to keep your files instaticfolder (relevant info), or - In
vue-2&vue-cli-3if you don't like to keep your files inpublicfolder (staticfolder is renamed topublic):
The simple solution is :)
<img src="@/assets/img/clear.gif" /> // just do this: <img :src="require(`@/assets/img/clear.gif`)" // or do this: <img :src="require(`@/assets/img/${imgURL}`)" // if pulling from: data() {return {imgURL: 'clear.gif'}}If you like to keep your static images in
static/assets/imgorpublic/assets/imgfolder, then just do:<img src="./assets/img/clear.gif" /> <img src="/assets/img/clear.gif" /> // in some case without dot ./讨论(0) - In
-
If you want to bind a string to the
srcattribute, you should wrap it on single quotes:<img v-bind:src="'/static/img/clear.gif'"> <!-- or shorthand --> <img :src="'/static/img/clear.gif'">IMO you do not need to bind a string, you could use the simple way:
<img src="/static/img/clear.gif">Check an example about the image preload here: http://codepen.io/pespantelis/pen/RWVZxL
讨论(0) -
You need use just simple code
<img alt="img" src="../assets/index.png" />Do not forgot atribut alt in balise img
讨论(0) -
This is how i solve it.:
items: [ { title: 'Dashboard', icon: require('@/assets/icons/sidebar/dashboard.svg') }, { title: 'Projects', icon: require('@/assets/icons/sidebar/projects.svg') }, { title: 'Clients', icon: require('@/assets/icons/sidebar/clients.svg') }, ],And on the template part:
<img :src="item.icon" />See it in action here
讨论(0) -
declare new variable that the value contain the path of image
const imgLink = require('../../assets/your-image.png')then call the variable
export default { name: 'onepage', data(){ return{ img: imgLink, } } }bind that on html, this the example:
<a href="#"><img v-bind:src="img" alt="" class="logo"></a>hope it will help
讨论(0) -
@Pantelis answer somehow steered me to a solution for a similar misunderstanding. A message board project I'm working on needs to show an optional image. I was having fits trying to get the src=imagefile to concatenate a fixed path and variable filename string until I saw the quirky use of "''" quotes :-)
<template id="symp-tmpl"> <div> <div v-for="item in items" style="clear: both;"> <div v-if="(item.imagefile !== '[none]')"> <img v-bind:src="'/storage/userimages/' + item.imagefile"> </div> sub: <span>@{{ item.subject }}</span> <span v-if="(login == item.author)">[edit]</span> <br>@{{ item.author }} <br>msg: <span>@{{ item.message }}</span> </div> </div> </template>讨论(0)
加载中...
- 热议问题