Vue.js 是一款流行的前端框架，它提供了方便的数据绑定和组件化开发方式。在 Vue.js 开发中，我们通常会用到图片，但是在使用图片时，经常会遇到图片路径显示问题。在本文中，我们将介绍 Vue.js 中如何解决图片路径显示问题。
问题描述
在 Vue.js 中，我们通常使用 img 标签来显示图片，例如：
<img src="./images/logo.png">
这里的 src 属性值是相对于当前页面的路径。但是，当我们在其他页面或组件中使用相同的路径时，可能会出现图片无法显示的问题。
例如，在一个名为 home 的组件中，我们使用了相同的图片路径：
<template> <div> <img src="./images/logo.png"> </div> </template>
但是，当我们访问 home 组件时，图片无法显示，因为此时的路径是相对于 home 组件的路径，而不是相对于当前页面的路径。
解决方法
为了解决图片路径显示问题，我们需要使用绝对路径或基于根目录的路径。
使用绝对路径
使用绝对路径可以确保图片的路径始终是相对于根目录的，而不是相对于当前页面或组件的路径。
在 Vue.js 中，我们可以使用 process.env.BASE_URL 变量来获取根目录的路径。例如：
<img :src="`${process.env.BASE_URL}images/logo.png`">
这里的 ${process.env.BASE_URL} 表示根目录的路径，然后再加上图片相对于根目录的路径。
基于根目录的路径
除了使用 process.env.BASE_URL 变量，我们还可以使用 Webpack 的 resolve 函数来生成基于根目录的路径。
首先，我们需要在 vue.config.js 文件中进行配置：
-- -------------------- ---- ------- -------------- - - -------- ---- ----------------- - -------- - ------ - ---- ----------------------- ------ - - - -展开代码
这里的 baseUrl 表示根目录的路径，@ 表示 src 目录的路径。
然后，在 Vue.js 中，我们可以使用 @ 符号来代替 src 目录的路径。例如：
<img :src="require('@/images/logo.png')">
这里的 require('@/images/logo.png') 表示 src/images/logo.png 的路径。
示例代码
下面是一个完整的示例代码：
-- -------------------- ---- ------- ---------- ----- ---- ------------------------------------------------ ---- ------------------------------------ ------ ----------- -------- ------ ------- - ----- ------ - ---------展开代码
结论
在 Vue.js 中，解决图片路径显示问题可以使用绝对路径或基于根目录的路径。使用绝对路径时，我们可以使用 process.env.BASE_URL 变量来获取根目录的路径；使用基于根目录的路径时，我们需要在 vue.config.js 文件中进行配置，并使用 @ 符号来代替 src 目录的路径。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673fdc9a5ade33eb72313f55
