写vue写的不多,记录一下这个小坑

知识点:es6模板字符串${}

(一)需求:

使用vue根据后端传的json数组的某一字段来拼接img的src路径,动态的绑定img标签的图片,图片来源本地文件夹,
我最开始的写法是：

<img :src="imgs/{{e_status}}.png"  />

结果失败了，查了资料发现问题原因：
如果直接利用+和{{}}来拼接路径,该路径会被加载器解析成字符串

↓json格式:根据不同的e_status拼接不同的图片,例如当e_status值为2，使用2.png的图片，当e_status值为1，使用1.png的图片,以此类推。

↓本地文件夹的图片(titleicon.ico没有使用不用管)

(二)解决方案

利用ES6的模板字符串进行拼接操作

模板字符串使用反引号 (`) 来代替普通字符串中的双引号和单引号。模板字符串可以包含特定语法（${expression}）的占位符,${xxx}可以被正常解析为表达式而不会被加载器解析成普通字符串。
占位符中的表达式和周围的文本会一起传递给一个默认函数，该函数负责将所有的部分连接起来。

1、反单引号怎么打出来？
将输入法调整为英文输入法，单击键盘上数字键1左边的按键。

2、用法

step1： 定义需要拼接进去的字符串变量 ,例如 exam.e_status
step2： 将字符串变量用${}包起来，替换之前的{{value}} 写法

imgs/{{e_status}}.png 改为 imgs/${exam.e_status}.png

step3: 反引号
路径用反引号包裹,表示这是一个模板字符串,最后填到需要绑定的地方

 `imgs/${exam.e_status}.png`

核心代码:

<img :src="`imgs/${exam.e_status}.png`" />

这样就能从json数据中取到对应的字段来拼接src了,就可以显示图片

我这里的完整代码:

(三)别人的解决方法与反思

之前在网上搜索的方法大多是利用require包裹,但是似乎得利用cli脚手架,对于只是把vue.js引用到html的传统开发方式来说,会报require未定义的错误,如果自己手动下载require.js再引入html页面中也不能解决问题会报require error(具体我没细看了)
（↓传统开发模式）

<script type="text/javascript" src="path/js/vue.js"></script>

不过还是放一个别人利用require写的方法吧

// 最终修改，正常加载
<img :src="require(`../assets/${ss[1]}.svg`)" alt="" />
// 网络图片，这样就可以正常显示
<!-- <img :src="ss[2]" alt="" /> -->

他人的原贴:vue–dom中字符串拼接、img地址拼接问题

https://www.cnblogs.com/jry199506/p/11387761.html

ps:一开始出错还以为是自己不熟悉vue的锅,后来才发现是记错了json数组的字段了,所以如果不能根据报错找到错误,下次记得先检查数据的正确性和数据使用的正确性!