vue单引号双引号踩的坑
最近写项目,循环展示本地图片,本来运行的好好的,格式化一下图片就不展示了。找了半天终于找到问题了。因为我是动态绑定了img的src,引号嵌套要单引号套双引号(我也不知道为啥是这样,网上和自己以往的经验都是应该双引号套单引号?)我之前就是用的单引号套的双引号才成功的,但是格式化之后它自动给我改成双引号套单引号了,所以会出现图片显示不出来的问题。正确代码:<template><div
·
最近写项目,循环展示本地图片,本来运行的好好的,格式化一下图片就不展示了。找了半天终于找到问题了。因为我是动态绑定了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>
结果:
分析原因可能是只把上面的转化成字符串了并没有进行解析,而下面的进行字符串转化后还被解析成图片了,所以才能在浏览器中展示。
更多推荐
已为社区贡献1条内容
所有评论(0)