vue中如何拼接字符串

Question

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

Answer 1

Vue.js中的图片引用路径的方式:第一种：按照正常HTML语法引用路径<template>&nbsp; <div id="app">&nbsp; &nbsp; <img src="./assets/logo.png">&nbsp; &nbsp; <router-view/>&nbsp; </div></template><script>export default {&nbsp; name: 'App',&nbsp; data () {&nbsp; &nbsp; return {}&nbsp; }}</script>第二种：使用import方式<template>&nbsp; <div id="app">&nbsp; &nbsp; <img :src="logoSrc">&nbsp; &nbsp; <router-view/>&nbsp; </div></template><script>import logoSrc from './assets/logo.png'export default {&nbsp; name: 'App',&nbsp; data () {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; logoSrc: logoSrc&nbsp; &nbsp; }&nbsp; }}</script>第三种：使用require方式<template>&nbsp; <div id="app">&nbsp; &nbsp; <img :src='require("./assets/logo.png")'>&nbsp; &nbsp; <router-view/>&nbsp; </div></template><script>export default {&nbsp; name: 'App',&nbsp; data () {&nbsp; &nbsp; return {}&nbsp; }}</script>返回到您的问题，也直接给您做了一个demo：<template>&nbsp; <div id="app">&nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; <li v-for="(item, index) in arr" :key="index">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<!--这个地方用了ES6的模板字符串，模板字符串是增强版的字符串，用反引号（`）标识-->&nbsp; &nbsp; &nbsp; &nbsp; <img :src="require(`./assets/logo${index}.jpeg`)" alt="">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <p>{{item.text}}</p>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; </ul>&nbsp; &nbsp; <router-view/>&nbsp; </div></template><script>export default {&nbsp; name: 'App',&nbsp; data () {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; arr: [{&nbsp; &nbsp; &nbsp; &nbsp; text: '111'&nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; text: '222'&nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; text: '333'&nbsp; &nbsp; &nbsp; }]&nbsp; &nbsp; }&nbsp; }}</script>效果如下：

Answer 2

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

Answer 3

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