vue中如何拼接字符串

Question

src="'../assets/images/data-icon-'+(index+1)+'.jpg'" 如何拼接？
上面的写法最后的链接是对的，可是加载不到图片

Answer 1

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>

效果如下：

Answer 2

拼接没问题，应该是这个地址不对，没有图片可以读取。可以看下相对路径是不是写错了

Answer 3

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

Answer 4

网络中查下，看图片是不是404

Answer 5

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