怎么在uniapp、index.vue中导入图片

在uniapp、index.vue中导入图片的方法分别如下：

1、在uniapp导入图片的方法是在js中通过require() 引入图片（图片大小不能超过3kb）或在html中通过相对路径引入（绝对路径打包后图片不显示）。

2、在index.vue中导入图片的方法是先给图片地址绑定变量，在script中设置变量。直接将图片引入为模块，require imgUrl from "../assets/test.png"。即可完成图片的导入。

原因：因为动态添加src被当做静态资源处理了，没有进行编译，所以要加上require。

使用require定义之后，你就可以动态使用了，不用require你就只能写死的。

用 :src="'../img/image.jpg'" 找不到图片地址

<img src="../img/image.jpg">// 正常加载

如何使用require:

src1：require('../img/image1.jpg'),

src2：require('../img/image2.jpg'),

index: 1,

<img :src="index = 0 ? src1: src2">// 动态地址，正常加载

或者 <img :src="require('../../../assets/'+item.name+'_icon.png')">

vue上传图片是编码，要用到一个文本编辑器，视频教程上使用的是富文本编辑器Tinymce，但是Tinymce是一个传统javascript插件，默认不能用于Vue.js因此需要做一些特殊的整合步骤，步骤有些许麻烦，于是打算用跟此博客一样，用markdown带代替，因为此blog的markdown中上传图片是自己修改方法，上传到oss中的，此时传入数据库的图片路径就是保存的到云存储里面的路径。

而我发现Tinymce编辑器在做原本的添加图片时，Tinymce中的图片上传功能直接存储的是图片的base64编码，因此无需图片服务器。

所以，突发奇想能不能修改markdown添加图片功能，实现将图片转为Base64，存入数据库，查找了相关资料后，发现这样虽然可以，但是会导致Pandoc编译速度慢，甚至内存堆栈不足，虽然不推荐此使用，但是还是尝试一下。

---