动态设置图片路径时~无法转绝对路径，构建后路径失效求助

核心原因 #

1. 波浪号~无法解析：Vue动态绑定:src时，直接写字符串'~/assets/xxx'不会被Webpack/Vite解析。~是构建工具的路径别名，仅在静态导入（如import img from '~/assets/xxx'）或被构建工具预先扫描的路径中生效，动态字符串无法被提前处理，导致浏览器直接请求带~的无效路径，返回404。
2. 硬编码buildAssetsDir路径无效：buildAssetsDir是构建后资源的输出目录，但开发环境与生产环境的资源路径逻辑不同：
   • 开发时资源由构建工具托管，路径并非直接指向example目录；
   • 构建后资源会被哈希重命名（如image1.hash.jpg），硬编码的固定文件名无法匹配实际打包后的文件名，导致加载失败。

可行解决方案 #

方案1：使用require动态导入（Webpack环境） #

通过require()让Webpack解析动态路径，自动处理别名与资源打包：

<template>
  <div v-for="(part, index) in parts" :key="index">
    <img 
      :src="require(`@/assets/images/how-to-use/image${index + 1}.jpg`)" 
      :alt="part.title"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      parts: [{ title: '标题1' }, { title: '标题2' }, { title: '标题3' }]
    }
  }
}
</script>

注：@是Vue CLI/Webpack默认的src目录别名，和~等效。

方案2：将图片放入public目录 #

public目录下的文件会被原样复制到构建根目录，无需经过构建工具处理，可直接用绝对路径访问：

1. 将图片移至public/images/how-to-use/目录；
2. 动态绑定路径：

<template>
  <div v-for="(part, index) in parts" :key="index">
    <img 
      :src="`/images/how-to-use/image${index + 1}.jpg`" 
      :alt="part.title"
    />
  </div>
</template>

方案3：使用new URL()（Vite环境） #

如果项目基于Vite构建，需用new URL()结合import.meta.url解析动态资源：

<template>
  <div v-for="(part, index) in parts" :key="index">
    <img 
      :src="getImageUrl(index + 1)" 
      :alt="part.title"
    />
  </div>
</template>

<script setup>
const parts = [{ title: '标题1' }, { title: '标题2' }, { title: '标题3' }]

const getImageUrl = (num) => {
  return new URL(`./assets/images/how-to-use/image${num}.jpg`, import.meta.url).href
}
</script>

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