Vue.js中点击动态切换两张图片的问题求助

问题原因 #

直接通过字符串拼接生成图片路径时，Vue构建工具（Vite/Webpack）无法识别这是需要处理的静态资源，只会将其当作普通URL，导致本地服务器无法找到对应文件。而固定写死的路径会被构建工具自动解析为正确的资源路径，因此能正常显示。

解决方案 #

根据你的项目构建工具，选择以下方式动态导入图片：

若使用Vite（Vue3默认构建工具） #

修改组件中的imageSource计算属性：

const imageSource = computed(() => {
  const fileName = isBlue.value ? `${props.imageName}Blue.png` : `${props.imageName}.png`
  return new URL(`../../assets/images/${fileName}`, import.meta.url).href
})

若使用Webpack（如Vue CLI创建的项目） #

修改组件中的imageSource计算属性：

const imageSource = computed(() => {
  const fileName = isBlue.value ? `${props.imageName}Blue.png` : `${props.imageName}.png`
  return require(`../../assets/images/${fileName}`)
})

原理说明 #

• Vite中new URL()会基于当前模块的URL（import.meta.url）解析相对路径，构建时会自动处理图片资源，生成正确的输出路径。
• Webpack中require()会触发资源解析流程，让Webpack识别并处理静态图片，替换为构建后的资源地址。

修改后点击切换图片，查看控制台中img元素的src属性，应该能看到构建后的正确路径，图片即可正常显示。

内容的提问来源于stack exchange，提问作者mkdir.enzo