由于vue项目无法通过本地地址(如file:///D:/upload/20211012/fa78e18f-612e-4486-9f7f-63a13a5aa6e0.jpg)访问本地电脑的图片,只能通过nginx代理来访问。
nginx的下载与安装参考:https://www.cnblogs.com/zwh0910/p/15400709.html
配置虚拟主机http://localhost:8888
修改配置文件:
http { include mime.types; default_type application/octet-stream; sendfile on; keepalive_timeout 65; server { listen 8888; server_name localhost; location / { root D:/upload; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } }
注意:
1、修改端口为8888,以避免端口冲突。
2、用root而不是alias.
启动nginx,访问:http://localhost:8888/20211012/fa78e18f-612e-4486-9f7f-63a13a5aa6e0.jpg,可以看到图片,如下
在vue项目的代码中访问本地电脑的图片
<view v-if="key == '入场检验报告'" class="bottom_detail_list_cell">
<view class="bottom_detail_name">
<text>{{key}}</text>
</view>
<view class="bottom_detail_content sub_detail_arrow">
<button class="mini-btn" type="primary" size="mini" @tap="toFilePage(key,['http://localhost:8888' + value])">查看文件</button>
</view>
</view>
实际开发中代码:
<view v-if="key == '入场检验报告'" class="bottom_detail_list_cell"> <view class="bottom_detail_name"> <text>{{key}}</text> </view> <view class="bottom_detail_content sub_detail_arrow"> <button class="mini-btn" type="primary" size="mini" @tap="toFilePage(key,[this.$globalParam.globalUrl + value])">查看文件</button> </view> </view>