router-link：可以帮助你跳转到指定的路径，path后：是你路由里配置的页面地址

我们使用数据绑定的方式 ：src 读取图片

1.在Vue的template中这么写：

<div class>
    <!-- 我这里跳转到：http:localhost:8080/rankpage-->
    <router-link :to="{ path: '/rankpage' }">
        <!-- 使用:src数据绑定，地址写在data中 -->
        <el-image
              style="width: 40px; height: 40px"
              :src="url"
              :fit="fit"
              >
        </el-image>
    </router-link>
</div>

2.在Vue的script中这么写：

在url中要加上require

export default {
  name: "HomeSearch",
  data() {
    return {
      searchinput: "",
      url: require("../assets/login.jpg"),// 这里要加上require，我这里使用相对路径
      fit: "cover"
    };
  }
};

这样子就完成了加载图片，以及实现点击图片跳转到rankpage页面，哦耶！！

在介绍一种不需要通过数据绑定，读取图片的方式：

只需要一步：

将el-image替换成img

再将：src替换成src，在src后面直接添加图片相对路径

<div>
    <router-link :to="{ path: '/rankpage' }">
        <!-- 使用el-image的:src需要加require -->
        <img
             style="width: 40px; height: 40px"
             src="../assets/login.jpg"
             :fit="fit"
             >
        </img>
    </router-link>
</div>

这样子就完成啦！哦耶！！