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>
这样子就完成啦!哦耶!!
Logo

前往低代码交流专区

更多推荐