vue中如何拼接字符串

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的模板字符串，模板字符串是增強版的字符串，用反引號（`）標(biāo)識-->
        <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>

效果如下：

可以用require, :src="require('../assets/images/data-icon-'+(index+1)+'.jpg')"

拼接沒問題，應(yīng)該是這個地址不對，沒有圖片可以讀取?？梢钥聪孪鄬β窂绞遣皇菍戝e了

網(wǎng)絡(luò)中查下，看圖片是不是404

methods: {
    imgSrc: function(index){
        return '../assets/images/data-icon-'+(index+1)+'.jpg'
    }
}
<img :src="imgSrc(index)">