使用Webpack时通过JavaScript设置背景图片的问题求助

问题核心在于Webpack对静态资源的处理逻辑差异：CSS中的资源路径会被css-loader自动解析并替换为打包后的正确路径，但JavaScript里直接写的字符串路径不会被Webpack处理，导致运行时找不到文件。

解决步骤： #

1. 正确导入目标图片资源：和你导入waldo2的方式一致，把waldo3.jpg也通过import导入，让Webpack识别并处理这个资源。
2. 用导入后的资源变量设置CSS变量：使用Webpack处理后的正确路径赋值给CSS变量，而非直接写相对路径字符串。

修改后的代码示例： #

JavaScript代码：

import waldo2 from './images/waldo2resize.jpg'
// 新增：导入waldo3图片，交给Webpack处理
import waldo3 from './images/waldo3.jpg'

const addPic = (picture) => {
    const picContainer = document.createElement('div');
    picContainer.id = 'picContainer'
    picContainer.classList.add('svgContainer');
    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svg.id = 'container';
    
    // 修改：用Webpack处理后的路径设置CSS变量
    document.documentElement.style.setProperty('--myVariable', `url(${waldo3})`);
    
    picContainer.appendChild(svg)
    document.body.appendChild(picContainer);
}

export default addPic;

CSS代码（无需修改）：

:root{ --myVariable : url(./images/waldo2.jpg) }

body {}

.svgContainer {}

#container {
    height: 1926px;
    width: 2500px;
    background-image: var(--myVariable);
    background-size: 100%;
}

原理说明： #

• 通过import导入图片时，Webpack会将图片作为资源模块处理，根据你的配置（如asset/resource规则）生成打包后的文件（可能带哈希后缀），并返回该文件的正确访问路径。
• 直接在JS中写./images/waldo3.jpg这类字符串时，Webpack不会解析该路径，运行时浏览器会从dist根目录直接查找这个路径，但Webpack已将图片打包到了指定资源目录，因此会出现文件找不到的错误。

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