JS本地获取服务器上的图片路径怎么写，有哪些方法？

在JavaScript中获取服务器上的图片路径，本质上是拼接或解析出一个完整的URL，核心方法有三种：直接拼接字符串、通过接口获取文件名后拼接、以及利用服务器目录列表功能。 实际操作中，你多半会遇到跨域、编码、动态路径等问题，下面我把每一种场景的完整写法都拆给你看，你直接复制改就能用。

js获取服务器图片路径的三种典型场景

已知文件名，直接拼接服务器路径

这是最常见的情况,图片在服务器上有个固定目录，文件名要么写死、要么从接口返回，假设服务器地址是https://img.example.com，图片存放在/uploads/avatar/下。

加载中

7.2 图片路径

累了就来这看一会吧

155213-

原视频地址

const baseUrl = "https://img.example.com";
const imgPath = `${baseUrl}/uploads/avatar/2026/01/user_1001.jpg`;
document.getElementById("avatar").src = imgPath;

这里有个坑要提醒你：很多新手直接写相对路径，比如<img src="uploads/avatar/user_1001.jpg">，如果页面在https://example.com/page，浏览器会解析成https://example.com/uploads/avatar/user_1001.jpg，这没问题，但一旦页面处在二级目录或用了路由SPA，相对路径就会跑偏，所以用绝对路径是更稳妥的做法，把域名单独拎出来作为变量，维护成本也低。

接口返回文件名，前端拼接完整路径

当图片数量多、需要后台管理时，接口通常只返回文件名或部分路径，完整URL由前端拼出来。

// 假设接口返回 { avatar: "2026/01/user_1001.jpg" }
fetch("https://api.example.com/user/info")
  .then(res => res.json())
  .then(data => {
    const avatarUrl = `https://img.example.com/uploads/${data.avatar}`;
    document.getElementById("userAvatar").src = avatarUrl;
  });

这种模式在电商、社交类网站很流行，图片服务器（如CDN）和接口服务器分离，前端拿到文件名后，拼接出经CDN加速的图片地址，这里有个行业共识：文件名不宜直接带完整URL返回，否则每次更换存储服务都要动后端代码，前端拼路径才是更灵活的做法。

通过文件夹遍历获取图片列表

如果你的图片无法穷举文件名,比如一个相册目录下有几十张图，没法一个个列出来，这种情况有两个办法：

办法A：后端提供目录列表接口，返回一个文件名数组，前端循环拼接。

fetch("https://api.example.com/gallery/list?folder=2026-01")
  .then(res => res.json())
  .then(data => {
    const gallery = document.getElementById("gallery");
    data.files.forEach(name => {
      const img = document.createElement("img");
      img.src = `https://img.example.com/gallery/${data.folder}/${name}`;
      gallery.appendChild(img);
    });
  });

办法B：开启Nginx的autoindex模块，如果你的图片目录就在Nginx下，且允许目录浏览：

location /gallery/ {
    autoindex on;
    autoindex_format json;
}

开启后,浏览器访问https://img.example.com/gallery/会直接返回一个JSON格式的文件列表，前端fetch这个地址，就能拿到目录下所有文件的数组，这种方式排查问题方便，但

生产环境不建议开启，容易泄露目录结构，实际用途多见于测试或内网环境。

获取服务器图片路径时必踩的几个坑

路径拼接时中文或特殊字符变成乱码

图片文件名带中文、空格、#号时，直接拼进URL大概率显示404，浏览器有自动编码机制，但fetch或XMLHttpRequest不会帮你处理，需要手动编码。

const fileName = "风景照 001.jpg";
const encodedName = encodeURIComponent(fileName);
// 结果是 风景%E7%85%A7%20001.jpg
const imgUrl = `https://img.example.com/uploads/${encodedName}`;

注意encodeURIComponent会把也编码掉，如果文件名里带子目录结构，要分段编码，别把整个路径一锅烩，还有一些细节处理，比如符号不编码会导致锚点干扰，空格不编码在部分浏览器会失效，处理完编码后在浏览器地址栏里直接访问一下，验证无误再上线。

如何获取服务器当前域名，避免写死地址

写死某个环境地址,换测试、预发、生产环境就得改代码，太痛苦，更聪明的做法是动态获取location对象信息：

// 基于当前页面的协议和域名，拼接图片地址
const imgBase = `${window.location.protocol}//${window.location.hostname}:${window.location.port}`;

这样前端代码不管部署在哪个环境,图片地址都跟着域名走，省心不少，不过生产环境中有个常见做法是将图片放CDN，域名和业务域名不一致，这时候就需要在环境配置里维护一个单独的变量，前端构建时代入即可。

构建工具里的路径问题（Vite / Webpack）

现在的项目大多用前端框架开发,构建后静态资源路径也影响到最终加载效果，Vite 5+的配置里，base字段直接影响资源引用：

// vite.config.js
export default {
    base: process.env.NODE_ENV === "production" ? "https://cdn.example.com/" : "/",
};

开发环境下用相对路径,生产环境指向CDN地址，图片引用问题迎刃而解，如果你是把项目部署在服务器子目录，比如https://example.com/admin/，那base要设成/admin/，否则图片和JS都会404，相当一部分前端项目图片加载不出来，就是这一步没配好。

前端读取服务器文件夹下所有图片的完整方案

这个需求在很多后台管理系统中会遇到,比如一次性展示某商品的全部细节图，核心思路是让图片服务器暴露一个可以被前端遍历的接口。

Java / Node.js 后端配合写一个目录接口

以Node.js Express为例，用fs.readdir读取目录，返回文件名列表：

const fs = require("fs");
const path = require("path");
app.get("/api/images", (req, res) => {
    const dir = path.join(__dirname, "uploads", req.query.folder);
    fs.readdir(dir, (err, files) => {
        if (err) return res.status(500).json({ error: "读取失败" });
        const images = files.filter(f => /.(jpg|jpeg|png|gif|webp)$/i.test(f));
        res.json({ images });
    });
});

前端拿到数组后拼接完整路径渲染即可,思路和场景二的循环一致，就不重复贴代码了。

Nginx自动把目录映射成JSON

前面提到过autoindex_format json，用起来效果如下：镜像目录下文件什么名字，JSON里就原样返回。

location /img/ {
    alias /data/product-images/;
    autoindex on;
    autoindex_format json;
}

访问https://img.example.com/img/?folder=2026，浏览器返回类似{"name":"uploads","files":["1.jpg","2.jpg"]}的JSON数据，前端fetch然后遍历拼接，就能动态展示全部图片，这个方法省掉了后端编码工作，但有个限制：autoindex的JSON格式字段是Nginx固定的，不能自定义，用到生产前务必确认数据格式和前端匹配，实际项目中还遇到过autoindex开启后大文件列表响应慢的情况，多数情况下几十个文件没问题，上千个建议还是走后端分页接口。

H2服务器插件（低代码场景）

如果你用的是http-server这类轻量级工具，它也自带目录列表页面：

npx http-server /data/images -p 8080 --cors

浏览器访问http://localhost:8080/，Nginx会自动渲染一个HTML目录列表，每张图片下方直接显示可点击的路径，虽然这个页面不是JSON结构，但直接拿它当图片浏览器用没问题，适合内网快速共享图片。

关于图片路径的另外两个常见问题

为什么图片路径正确，但浏览器显示403无权限？

这大概率是防盗链设置,图片服务器（尤其是Nginx）配置了valid_referers，只允许特定域名的页面引用图片资源，如果你的前端域名不在白名单里，浏览器请求图片时带上了Referer头，直接被服务器拒了，解决办法：

• 在Nginx图片服务配置里关闭防盗链,或加上白名单：

  location /uploads/ {
    valid_referers none blocked server_names .example.com;
  }

• 前端给<img>标签加referrerpolicy="no-referrer"属性，不发送Referer头，绕过限制。

相对路径和绝对路径，哪个更好？

行业专家指出,在SPA（单页应用）盛行后，页面路由是前端控制的，相对路径解析完全看路由地址变更，极不可控，一个典型的坑是：路由切换从/product/12变成/product/12/detail，相对路径../uploads/1.jpg就解析到不同位置，图片时好时坏，除非是简单的静态页面，否则一律建议使用绝对路径拼接。

HTML中图片的懒加载机制对路径的影响

为了提高首屏速度,现代网站对图片普遍使用懒加载，当你用JS动态设置src地址时，要配合懒加载框架的玩法：

<img data-src="https://img.example.com/uploads/1.jpg" class="lazyload" />

对应的JS：

// 简易懒加载
const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const img = entry.target;
            img.src = img.dataset.src;
        }
    });
});
document.querySelectorAll(".lazyload").forEach(img => observer.observe(img));

如果用懒加载库（如lozad.js），路径照样放在data-src里，先不触发真实请求，滚动到视口才加载，这里要提醒：不要把路径动态改到src前就急着让后端返回所有图片数据，结合分页或虚拟滚动，才是长久之道。

服务端渲染（SSR）中路径拼接的一点额外思考

如果你用的是Nuxt或Next.js做SSR，页面是在服务器端拼好HTML返回的，这时候图片路径天然是好走的，但在客户端水合时，如果接口返回了新的图片路径，还是得走拼接流程，SSR中读取图片目录时要注意文件系统权限和操作系统路径差异（Windows和Linux路径分隔符不同），建议统一使用path.join来处理。

js获取服务器图片路径的完整流程总结

写一个能用的获取路径逻辑,你只需要四步：

1. 确定图片服务器域名,建议拆成配置变量
2. 根据接口返回的文件名 / 子目录，使用模板字符串拼接出完整URL
3. 对含特殊字符的文件名做encodeURIComponent编码
4. 把拼好的地址赋值给<img>的src或是背景图的url()

做前端头像、商品图、相册图跳转，这几步足够应对绝大多数场景，至于那些更复杂的，比如需要鉴权才能访问的图片（使用带签名URL），就更要严格走后端返回URL的方式，前端不自己拼，仅仅展示。

js获取服务器图片路径常见问题解答

问：js直接读取服务器本地某目录下的所有图片，不写后端代码能实现吗？

答：可以实现，几种方式中最推荐的是Nginx开启autoindex，用autoindex_format json让目录信息以JSON返回，前端fetch这个接口后即可拿到所有文件名并拼接为图片路径，如果你用的是精简测试环境，http-server --cors也能达到类似效果，它的目录列表是HTML格式，展示为主，抓取数据稍显不便，不过这两种方式都依赖服务器配置，严格意义上完全零配置就能实现是不可能的，浏览器安全策略不允许前端直接访问文件系统目录。

问：后端返回的图片路径只有”images/abc.jpg”这样的部分路径，前端需要拼上域名吗？

答：是的，后端返回的接口数据中通常只包含存储的相对路径，不包含服务域名，这是为了便于后续迁移、切换存储方案，前端拼地址时，最好从全局配置读取图片域名，而不是在每一个接口渲染处硬编码，拼接时先判断返回值是否以http开头，如果已经是完整URL就不要再拼，避免重复，如果一个环境后端返回的路径含有/uploads/前缀，另一套环境没有，接口提供方需要保证前后缀规范一致，出现不一致时你需要在前端做一次兼容，通过includes判断或正则截取，确保拼接后不产生双斜杠或丢层级，这套逻辑跑通后，你会在排查线上图片裂开时少走不少弯路。