非首页页面Image src路径错误，如何正确设置图片路径？

这是开发中很常见的相对路径陷阱！不用写完整URL也能轻松搞定，给你几个实用方案：

1. 使用根相对路径（最推荐） #

直接在图片路径开头加上斜杠/，把相对路径改成根相对路径：

<img src="/images/icons/artist_default.png" alt="默认艺术家头像">

这个斜杠代表网站的根目录（也就是http://localhost:7777/），不管你在哪个子页面（比如/user/giorgio-martini），浏览器都会从根目录开始查找图片，不会再自动拼接当前页面的路径前缀。

2. 设置<base>标签统一基准路径 #

在页面的<head>标签里添加一个<base>标签，指定所有相对路径的基准URL：

<head>
  <base href="/">
</head>

这样页面里所有的相对路径（包括图片、链接、脚本）都会以/为基准来解析，和第一个方法效果类似。不过要注意：如果你的页面里有一些需要基于当前页面路径的相对链接，这个标签可能会影响它们的解析，使用前要确认场景是否合适。

3. 框架项目的专属方案（如果用了前端框架） #

如果你是用Vue、React这类框架开发的，可以利用框架的静态资源引用规则：

• Vue中可以用@作为src目录的别名，比如：

<img src="@/assets/images/icons/artist_default.png" alt="默认艺术家头像">

• React中直接引入静态资源文件（框架会帮你处理路径）：

import ArtistDefault from './images/icons/artist_default.png';
// 然后在组件里使用
<img src={ArtistDefault} alt="默认艺术家头像" />

以上几个方案都能避免写完整的URL，同时保证图片在任何页面都能正确加载～

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