vue单引号双引号踩的坑

最近写项目，循环展示本地图片，本来运行的好好的，格式化一下图片就不展示了。找了半天终于找到问题了。因为我是动态绑定了img的src，引号嵌套要单引号套双引号（我也不知道为啥是这样，网上和自己以往的经验都是应该双引号套单引号？）

我之前就是用的单引号套的双引号才成功的，但是格式化之后它自动给我改成双引号套单引号了，所以会出现图片显示不出来的问题。

正确代码：

<template>
  <div class="homectrlitem">
    <div v-for="i in maxshow" :key="i" class="homectrlitem111">
      
      //注意这行代码
      <img :src='"~assets/img/ss/"+(i+num+currentindex*maxshow)+".jpeg"' alt="">
      
    </div>
  </div>
</template>

运行结果（原谅我是个生米哈哈哈哈）：

格式化之后的代码：

<template>
  <div class="homectrlitem">
    <div v-for="i in maxshow" :key="i" class="homectrlitem111">
      //格式化后它自动把引号改变了
      <img
        :src="'~assets/img/ss/' + (i + num + currentindex * maxshow) + '.jpeg'"
        alt=""
      />

     
    </div>
  </div>
</template>

运行结果：

 然后进行对比运行后的src：

<template>
  <div class="homectrlitem">
    <div v-for="i in maxshow" :key="i" class="homectrlitem111">

      <img :src="'~assets/img/ss/' + (i + num + currentindex * maxshow) + '.jpeg'" alt=""/>
      <img :src='"~assets/img/ss/"+(i+num+currentindex*maxshow)+".jpeg"' alt="">
 

    </div>
  </div>
</template>

 结果：

分析原因可能是只把上面的转化成字符串了并没有进行解析，而下面的进行字符串转化后还被解析成图片了，所以才能在浏览器中展示。