JS设置backgroundImage无法加载本地相对路径图片问题

云原生阿岚

2026-9-3

问题产生原因

容器无有效显示尺寸：<img>是替换元素，图片加载完成后会自动用原始尺寸撑开自身容器；但用来做背景容器的普通DOM元素（比如div）如果本身没有内容、也没手动设置宽高，默认高度为0，哪怕背景图实际加载成功，也没有可显示的区域，视觉上就是白屏。
file协议安全限制：如果你是直接双击本地html文件打开页面（地址栏为file:///开头），部分浏览器会拦截JS动态注入的本地资源请求，这类请求不会触发控制台报错，但资源实际不会加载；而写在静态HTML里的<img>标签属于页面初始声明的可信资源，不受该规则限制。
构建工具未识别资源路径：如果项目使用Vite、Webpack等构建工具，JS代码里直接写的字符串形式相对路径./assets/bg-1.jpg不会被构建工具识别为静态资源依赖，构建时既不会把图片拷贝到产物目录，也不会替换为产物对应的正确访问路径，最终路径失效；而HTML里写死的<img src>会被构建工具自动扫描处理，所以能正常加载。

解决方案

按优先级逐一排查即可：

首先给背景容器设置基础样式
给banner元素加明确宽高和背景适配属性，示例：

.banner {
  width: 100%;
  height: 480px; /* 按业务需求设置实际高度 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

注意：如果不设置background-size，当图片实际尺寸远大于容器时，可能只显示图片的空白边缘区域，也会看起来像加载失败。

用本地HTTP服务访问页面
开发调试时不要直接双击打开HTML文件，用VS Code的Live Server插件、或者在项目目录执行npx serve启动本地静态服务，通过http://localhost:端口号的地址访问页面，绕开file协议的安全限制。
构建工具项目正确引入静态资源
如果是用Vite/Webpack的项目，不要在JS里直接写本地图片的字符串路径，先把图片作为模块导入拿到正确的产物路径，再传入配置：

// 先导入本地图片资源，构建工具会自动处理路径
import localBannerBg from './assets/bg-1.jpg'

const bannerData = [{
    "title": "My title",
    "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,molest",
    "image_url": localBannerBg
  },
  {
    "title": "My title2",
    "description": "dwadawdwa",
    "image_url": "https://img2.storyblok.com/f/89778/1168x728/578a7ddf01/us_us-ny_nyc_1.jpeg"
  }
]

function initBanner(currentSlide) {
  banner.style.backgroundImage = `url('${bannerData[currentSlide].image_url}')`
  textBoxHeading.textContent = `${bannerData[currentSlide].title}`
  textBoxDescription.textContent = `${bannerData[currentSlide].description}`
}

如果是无构建工具的原生HTML/JS项目，确认assets文件夹和HTML文件在同一级目录，完成前两步排查后即可正常加载。

内容的提问来源于stack exchange，提问作者Dave