vue中如何用a标签打开本地图片

vue中如何用a标签打开本地图片

不知道各位有没有遇到希望在vue中点击一下a标签就打开本地图片这种情况。话说,会看到这篇博客的你话应该是遇到了同样的问题才对吧。
vue中如何用a标签打开本地图片可以这样写:

<a :href="require('../../img/test.jpg')"
             target="_blank">test</a>

地址用的是相对地址,其他如绝对地址没有试过。
target="_blank"是在新页面打开,没有需要可以不写。

扯点废话

废话还是放在最后吧,为什么要写这篇博客呢?。。好吧,自然是我刚好有这个需求,却突然懵了,不知要怎么实现。如果是打开本地的链接还好,用router-link 就好了。
打开本地的链接:
<router-link :to="{name:'test'}">test</router-link>
但是,怎么都没想到打开图片却发现一时没有好的办法。。虽然我想到可以做一个网页,然后将图片放上去,直接点击链接跳转至该页面就好。还是类似<router-link :to="{name:'test'}">test</router-link>,主要图片放在该页面就好了。不过果然还是想找找办法。
emem,找了好久,愣是没有百度到。。
这方法也是我试出来的,毕竟基础也不够好,也不清楚原理,只是类比图片引入:
图片引入的一种写法:
设置imgSrc变量,imgSrc:require('../../../../img/test.jpg'),然后<img :src="imgSrc">

最后

希望能给你带来帮助吧^^。
感谢看到最后

Logo

前往低代码交流专区

更多推荐