动态插入本地图片

最近用element-ui实现图片展示时，发现本地的图片加载不了，应该是路径读取方面的问题，找了很多都是用的url，终于找到一篇写本地的，做个笔记

 

版权声明：本文为优快云博主「苏醒的怪兽」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/qq_29869111/article/details/100154941

<el-image
  class="table-td-thumb"
  :src="'../../assets/img/coca.jpg"
></el-image>

本地加载
结果发现不对，加载不出来，一查资料，原来本地的图片要用require加载，遂改成下面代码

<el-image
  class="table-td-thumb"
  :src="'require(../../assets/img/coca.jpg)'"
></el-image>

果然加载成功了

动态加载
但是我是要动态加载，因此选择将图片路径放在数据库中，数据库加载数据到变量中，最后在组件中调用

<template slot-scope="scope">
  <el-image
    class="table-td-thumb"
    :src="require(scope.row.img)"
  ></el-image>
</template>

结果却出错了，图片加载不出来，于是又查了很多资料，原来require中不能直接用变量，这可难办了，接下来又查了很多资料，发现原来这么写就行了。

<template slot-scope="scope">
  <el-image
    class="table-td-thumb"
    :src="require('../../assets/img/'+scope.row.img+'.jpg')"
  ></el-image>
</template>

将文件名作为变量前后拼接字符串，而不是直接用变量做require的参数，这样就没问题了。