用vue做轮播图关于require的用法_element轮播图引入本地图片 require-CSDN博客

本文链接：https://blog.csdn.net/ssgreenBamboo/article/details/125570817

本文介绍了作者在将静态HTML轮播图转换为Vue项目时遇到的问题及解决方案。在Vue中，使用require语法加载图片路径是解决图片无法显示的关键，通过require(`…/…/static/images/banner.png`)，成功地让轮播图在Vue应用中正常显示。

摘要由CSDN通过智能技术生成

一开始,我用html做的页面,头部是轮播图,效果很好.
页面展示图片如下:
在这里插入图片描述

代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>front show</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="element.css">
  <script src="jquery.min.js"></script>
  <script src="vue.js"></script>
  <!-- 引入组件库 -->
  <script src="element.js"></script>
</head>

<body>
<div id="app" style="width: 80%; margin: 0 auto">
<!--顶部，是轮播图--><div class="showImg" >
<!--轮播图片-->
  <img  @mouseover="changeInterval(true)"
        @mouseleave="changeInterval(false)"
        v-for="(item) in imgArr"
        :key="item.id"
        :src="item.url"
        alt="暂无图片"
        v-show="item.id===currentIndex"
  >
<!--左侧按钮-->
  <div  @click="clickIcon('up')"   class="iconDiv icon-left">
    <i class="el-icon-caret-left"></i>
  </div>
<!--右侧按钮-->
  <div  @click="clickIcon('down')"  class="iconDiv icon-right">
    <i class="el-icon-caret-right"></i>
  </div>
<!--控制圆点-->
  <div class="banner-circle">
    <ul>
      <li @click="changeImg(item.id)"
          v-for="(item) in imgArr"
          :key="item.id"
          :class="item.id===currentIndex? 'active': '' "
      ></li>
    </ul>
  </div>
</div>

  <div class="title">
    <h2>直播回放</h2>
    <br>
    <table>
      <tr>
        <td class="zbhfpic"><img border="0" src="./img/mudan.png" width="400" height="300"></td>
        <td class="zbhfpic"> <img border="0" src="./img/shaoyao.png" width="400" height="300"></td>
      </tr>
      <tr>
        <td class="zbhftitle">Nothing is impossible</td>
        <td class="zbhftitle">let your dreams come true!</td>
      </tr>
      <tr>
        <td>Do you know?</td>

用vue做轮播图 关于require的用法

用vue做轮播图关于require的用法