Vue2中如何替换GSAP Scrolltrigger视差组件的随机图片为本地图片？

1. 先明确Vue本地图片的路径规则 #

• 图片放在src/assets目录：必须用require()引入，Vue会对该目录下的资源做打包解析，直接写相对路径会报错。
• 图片放在public（Vue2部分项目为static）目录：直接用绝对路径即可，比如/static/images/bg1.jpg，打包后不会被编译处理。

2. 修改背景图设置代码 #

原示例通过动态创建DOM设置网络图片，在Vue的mounted钩子中，按以下方式替换路径：

场景1：图片存于src/assets（示例路径src/assets/bgs/bg${i}.jpg） #

替换原代码的背景图设置行：

// 原代码
section.bg.style.backgroundImage = `url(https://picsum.photos/1600/800?random=${i})`;

// 修改后
const imgPath = require(`@/assets/bgs/bg${i}.jpg`); // @是Vue默认的src目录别名
section.bg.style.backgroundImage = `url(${imgPath})`;

注意：需保证图片数量和循环次数匹配，比如原示例循环5次，要准备bg0.jpg到bg4.jpg（或根据循环起始值调整命名）。

场景2：图片存于public/static（示例路径/static/bgs/bg${i}.jpg） #

直接使用绝对路径：

section.bg.style.backgroundImage = `url(/static/bgs/bg${i}.jpg)`;

3. 确保DOM选择器与Vue模板匹配 #

如果不是动态创建DOM，而是在Vue模板中预先写好结构，需调整逻辑：

• 模板示例：

<template>
  <div class="scroll-container">
    <section class="bg" v-for="(_, index) in 5" :key="index"></section>
  </div>
</template>

• mounted钩子中获取元素并设置：

mounted() {
  const sections = document.querySelectorAll('.bg');
  sections.forEach((section, i) => {
    // 设置本地背景图
    const imgPath = require(`@/assets/bgs/bg${i+1}.jpg`);
    section.style.backgroundImage = `url(${imgPath})`;
    // 保留原GSAP动画逻辑
    gsap.to(section, {
      backgroundPosition: `50% ${innerHeight}px`,
      ease: "none",
      scrollTrigger: {
        trigger: section,
        scrub: true
      }
    });
  });
}

4. 解决内联样式丢失动画的问题 #

直接在模板中写内联style="background-image: url(...)"会干扰GSAP动画，原因是GSAP通过修改元素style属性控制backgroundPosition，内联样式可能导致优先级冲突或初始化状态异常：

• 禁止在模板中设置background-position内联样式，让GSAP完全接管该属性。
• 如果必须预先设置背景图，在GSAP初始化前清除元素的backgroundPosition内联样式：

section.style.backgroundPosition = '';

5. 基础配置检查 #

确保GSAP和ScrollTrigger已正确安装注册：

import gsap from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

若出现图片404，打开浏览器控制台查看网络请求路径，根据实际路径调整写法。

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