最近写项目,循环展示本地图片,本来运行的好好的,格式化一下图片就不展示了。找了半天终于找到问题了。因为我是动态绑定了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>

 结果:

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

 

Logo

前往低代码交流专区

更多推荐