Vue3本地图片无法显示求助：URL配置排查与解决方案

问题核心原因 #

你当前使用的~@/assets/images/3.png路径写法存在两个关键问题：

1. Vue3+Vite环境下不支持~@这种路径前缀，正确的别名仅为@；
2. 直接在JavaScript字符串中写静态资源路径时，构建工具（Vite/Vue CLI）无法自动解析该路径，导致最终生成的URL无效。

具体解决方法 #

方法一：通过import引入图片（推荐） #

在组件脚本顶部导入图片资源，直接将导入的变量作为url值：

// 组件脚本顶部导入图片
import img3 from '@/assets/images/3.png'

export default {
  data (){
    return {
      // ...其他数据
      img1: {id:1, url: img3, ratio: 200 / 200}
    }
  },
  // ...其他代码
}

方法二：使用new URL()处理动态路径 #

如果需要动态拼接图片路径，可通过new URL()结合import.meta.url让构建工具解析路径：

data (){
  return {
    // ...其他数据
    img1: {
      id:1,
      url: new URL('@/assets/images/3.png', import.meta.url).href,
      ratio: 200 / 200
    }
  }
}

注：若为Vue CLI创建的项目，替换为process.env.BASE_URL：url: process.env.BASE_URL + 'assets/images/3.png'

方法三：确认路径别名配置正确 #

确保项目中@已配置指向src目录：

• Vite项目（vite.config.js）：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

• Vue CLI项目（vue.config.js）：

const path = require('path')

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    }
  }
}

额外检查 #

确认imgWaterFall组件中的<img>标签正确绑定路径：

<img
  class="img"
  :src="item.value.url"
  :style="{
    width: boxWidth - 10 + 'px',
    height: boxWidth / item.ratio - 10 + 'px'
  }" />

确保item.value.url能正确接收到处理后的有效图片URL。

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