Vant的Image组件图片路径正确但无法显示,如何解决?

a'ゞ倩影 阅读 20

在Vue项目里用Vant的Image组件,图片路径写对了但页面就是不显示,到底是哪里出问题了?

代码是这样写的:


<template>
  <van-image :src="imageSrc" width="100" height="100" />
</template>

<script>
export default {
  data() {
    return {
      imageSrc: require('@/assets/avatar.jpg')
    };
  }
};
</script>

本地图片存在,路径用require和直接写字符串都试过,控制台也没有报404错误。但页面上就是显示不了图片,占位位置有正确宽高但空白,有没有可能是组件配置哪里漏了?

我来解答 赞 3 收藏
二维码
手机扫码查看
2 条解答
シ树果
シ树果 Lv1
你这个情况大概率是 Vue 处理静态资源时的上下文问题,尤其是用 require 引入本地图片的时候。先说解决方案:把 require 放在 data 里没问题,但要注意构建工具(比如 webpack 或 vite)对静态资源的处理方式不同。

如果你用的是 Webpack,你的写法理论上是对的,但有时候 Vue 组件生命周期和资源解析时机对不上,建议改成在 computed 或直接在模板里确保路径被正确解析。更稳妥的做法是把图片放到 public 目录下,用绝对路径:

imageSrc: '/assets/avatar.jpg'


注意 /assets/... 是指 public/assets/ 下的文件,这样不会经过 require 打包,而是直接由静态服务器返回。

但如果必须走 require,确认一下你有没有在