解决 / el-image src属性使用相对路径时图片无法加载

最新推荐文章于 2025-05-23 16:05:57 发布

winglamx

最新推荐文章于 2025-05-23 16:05:57 发布

阅读量1.8k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：问题解决文章标签：前端

本文链接：https://blog.youkuaiyun.com/qq_39565174/article/details/124015342

问题解决专栏收录该内容

4 篇文章

订阅专栏

本文介绍了在前端开发中，使用绝对路径和相对路径加载图片时遇到的问题及其解决方案。当使用绝对路径时，图片能够正常显示；而相对路径可能导致图片加载失败。为解决这个问题，文章提出采用`require`方法来加载相对路径的图片，确保其能正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用绝对路径时 src引用可以正常显示图片

        <el-image
            style="
            margin-top:10px;
            float:left;
            height: 60px";
            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
        fit="contain"></el-image>

使用相对路径时，显示图片加载失败

        <el-image
            style="
            margin-top:10px;
            float:left;
            height: 60px"
            src="@/assets/LOGO-透明.png"
        fit="contain"></el-image>

解决方法：

        <el-image
            style="
            margin-top:10px;
            float:left;
            height: 60px"
            :src="require('@/assets/LOGO-透明.png')"
        fit="contain"></el-image>

用require来加载