请教下粘贴图片的优雅处理方式

Question

我用 imageUploadFunction 方式自定义了粘贴图片的处理，先把图片存在了本地，然后想在预览的时候进行预览，但发现跟native的 markdown 编辑器不一样，本地相对路径的图片无法进行渲染
原因其实也很好理解，所以我需要Hook下 editor 渲染图片的方法，但感觉不知道怎么下手去hook，请教下张轩老师和同学们有没有思路~

目前我用的是一个比较挫的办法：webSecurity: false ?

Answer 1

张轩 2019-10-20 19:18:22

同学 刚才试了一下，你写的非常好，ts用的很溜，在这个情况下，我认为直接使用 chrome 读取本地的文件这样做起来不是完美的解决方案，因为这种做法会有安全问题，可移植性也不太好。我觉得正确的方法是添加一个文件服务器来host 这些图片并且持久化，create-react-app 是本地起的一个服务器，它可以直接 host 静态文件，这是我简单实现的效果：

还有就是既然我们用了七牛云，你完全可以把图片存到对象存储中去，这样就完美结合起来了。

• 提问者 _广志_ #1

  前端菜鸡被老师夸脸红了☺️

• 提问者 _广志_ #2

  「添加一个文件服务器来host 这些图片并且持久化」这步没明白，老师能给下代码不~ (✧◡✧) ，另外这么做的话 build 出来的包也有效吗？

• 提问者 _广志_ #3

  另外不用七牛云的想法是希望能在离线的时候也能使用~ 就跟native应用一样~

点开查看后面2条评论

Answer 2

张轩 2019-10-20 09:17:10

能否把你的部分代码贴上来看看？

• 提问者 _广志_ #1

  好呀，等下哈~

• 提问者 _广志_ #2

  老师久等啦，editor代码在这里哈~ 辛苦老师解惑~ https://github.com/RubiTree/MindEditor/blob/master/src/containers/EditorContainer.tsx