今天在写vue前端的项目的时候,发现后端传来的绝对路径什么的都是正确的,在服务器中的文件夹中也能找到对应的图片,但是前端

<img :src="img.savePath"/>  //img.savePath是后端传回的绝对路径的存储变量

这个显示不了图片,发现是因为,前端部署在了容器中,无法直接在容器中访问文件夹其他目录下的数据(会破坏隔离性).所以就给出方案(完全不用改动后端部分)

采用nginx(反向代理)将图片的路径暴露在一个端口上,能通过url的方式进行访问.

首先:配置nginx代理

找到目标图片路径/data/cd/image/(我的是这个)

编写反向代理文件

nginx nano /你的反向代理文件路径/配置文件名称(自由起名)

进入之后

server{
        listen 8000; #你想要放置的端口

        server_name 192.168.100.1;#你本机的ip

        location /{

                root /data/cd/image/;

                add_header Access-Control-Allow-Origin *;

                add_header Access-Control-Allow-Methods 'GET, OPTIONS'; # 补全被截断的响应头，恢复完整跨域配置

                add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';

                expires 7d; # 移到location块内，缓存生效

                autoindex off; # 关闭目录浏览，生产环境必关（可选，推荐）

                }

        }

这样你就可以在

http://192.168.100.1:8000/test.jpg

这个网址下找到这个图片了

其次:修改前端代码

由于后端传来的代码是

img.savePath="/data/cd/image/test.jpg"

所以你可以设置两个常量来做替换

const HOST_IMG_ROOT='/data/cd/image'

const IMAGE_BASE_URL='http://192.168.100.1:8000'

然后采用

img.savePath.replace(HOST_IMG_ROOT,IMAGE_BASE_URL)

//语法是.replace(替换掉的部分,替换成);

所以就可以写成

<img :src="img.savePath.replace(HOST_IMG_ROOT,IMAGE_BASE_URL)" v-if="img.savePath" style="max-width: 150%; margin-top: 10px;"/>

---

如果大家感兴趣可以点点关注,我这个项目还在进行中,已经到了后期,这是我自己手搓的第一个大型项目,还有其他难题的话后续会跟大家分享,也请大佬也可以帮我指出错误或者提供思路