• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

vue项目通过nginx访问本地电脑的图片

开发技术 开发技术 3天前 7次浏览

由于vue项目无法通过本地地址(如file:///D:/upload/20211012/fa78e18f-612e-4486-9f7f-63a13a5aa6e0.jpg)访问本地电脑的图片,只能通过nginx代理来访问。

nginx的下载与安装参考:https://www.cnblogs.com/zwh0910/p/15400709.html

修改配置文件:

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项目通过nginx访问本地电脑的图片

 在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>

 


程序员灯塔
转载请注明原文链接:vue项目通过nginx访问本地电脑的图片
喜欢 (0)