TA貢獻1893條經(jīng)驗 獲得超10個贊
Vue.js中的圖片引用路徑的方式:
第一種：按照正常HTML語法引用路徑
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {}
}
}
</script>
第二種：使用import方式
<template>
<div id="app">
<img :src="logoSrc">
<router-view/>
</div>
</template>
<script>
import logoSrc from './assets/logo.png'
export default {
name: 'App',
data () {
return {
logoSrc: logoSrc
}
}
}
</script>
第三種：使用require方式
<template>
<div id="app">
<img :src='require("./assets/logo.png")'>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {}
}
}
</script>
返回到您的問題，也直接給您做了一個demo：
<template>
<div id="app">
<ul>
<li v-for="(item, index) in arr" :key="index">
<!--這個地方用了ES6的模板字符串，模板字符串是增強版的字符串，用反引號（`）標識-->
<img :src="require(`./assets/logo${index}.jpeg`)" alt="">
<p>{{item.text}}</p>
</li>
</ul>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
arr: [{
text: '111'
}, {
text: '222'
}, {
text: '333'
}]
}
}
}
</script>
效果如下：
TA貢獻1796條經(jīng)驗 獲得超7個贊
methods: {
imgSrc: function(index){
return '../assets/images/data-icon-'+(index+1)+'.jpg'
}
}
<img :src="imgSrc(index)">
舉報