有一个需求,大致是在本地软件上提供一个图片上传界面,用户「上传」图片后,将图片存至本地的用户目录,然后在上传界面将图片显示出来。
选用 ElmentUI 的 upload 组件。
由于该组件完美地封装为远程上传,而我其实并不需要「上传」,只需要将图片拷贝到自己的用户目录,所以走了许多弯路。
其一是该组件提供了一个名为 action 的 必选参数,提供了图片上传的地址。由于它是必选的,所以我把突破口放在它身上…其实不用管它,通过钩子 http-request,就可以实现自定义上传了。比如我就可以在这里面实现自己的图片拷贝逻辑。
其二就是图片显示了。Vue 里 img
的 src
不能直接使用本地路径,若想要显示本地图片,需要用 require
把图片当作资源引入进来,再传给 src
。但是 require
又不能用变量作为参数。按着前人的经验尝试了下用变量拼凑为字符串再传入,始终不行。
How to load dynamic images in Vue and Nuxt with ease
虽然没从上面这篇文章解决问题,但学到了几个用法。
最后比较自己和前人的异同,翻来覆去地比较,似乎就只有这么一个差异:自己本地图片的路径是在项目之外的,像这样:/home/user/.config/...
。而前人们的本地图片一般都在项目文件夹的 assets
之类的地方…
但是直接 src:"/home/../a.jpg"
这样也是可以显示的啊?两者真有什么不同吗?
一番搜索,注意到几个 local disk
之类的关键词,然后才联想到操作系统层面的 API,意识到可能应该从 Electron 着手。
键入关键字「electron img local disk」,第一篇就是这个:Load images from local disk
这位兄弟代码和我惊人的相似,暗骂一声心想终于稳了。
于是最后通过大兄弟使用的 :src="'file://'+ imageItem.url"
这样的写法实现了。(注意要在 Electron 的配置里设置 显示图片的那个窗口 的 webSecurity
为 false
。)
其实我之前尝试过用 file://
,但是 file://
放在 URL 的变量里也要报错,必须通过 :src="'file://'+ imageItem.url"
这样拼凑字符串才行。
甚至 :src="'file:/'+ imageItem.url"
这样拼也不行。(此时我的 URL 类似这样 /home/...
)
真是醉人。
总结:一个是对自己用的东西不熟悉,光是靠着面向搜索引擎是不够的。要是我足够屌,我就可以深入源码去了解到底是为啥了。可惜我不屌。第二个就是即便做一个「Ctrl C/V」程序员,也要学会分析问题。
作为一个 CVer(自造),有时候离正确答案就差一组合适的关键词。(至少学着去找到这组关键词)