vue src的图片报错的问题

Question

代码
在views目录中新建订单页组件Order.vue，切换至Develop组件中引入Order组件并设置相关参数，相关代码如下。

<template>
  <div>
    <table border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td>书籍名称</td>
        <td>购买数量</td>
        <td>适用校区</td>
        <td>总价</td>
      </tr>
      <tr>
        <td>{{ params[0] }}</td>
        <td>{{ params[1] }}</td>
        <td>{{ params[2] }}</td>
        <td>{{ params[3] }}元</td>
      </tr>
    </table>

    <div class="form-item">
      <input type="button" value="确定" />
    </div>
  </div>
</template>
<script>
export default {
  props: {
    params: Array
  }
}
</script>
<style scoped>
table {
  width: 100%;
  border: none;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  text-align: center;
}
td {
  border: none;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  height: 35px;
}
table tr:last-child td:last-child {
  width: 20%;
  color: #f00;
}
table tr:first-child {
  background-color: #e5f0fd;
  font-weight: bold;
}
.form-item {
  margin: 10px 0;
}
.form-item input {
  padding: 7px 20px;
  font: 14px/1.5 'Microsoft Yahei';
  background: #008aff;
  border: none;
  color: #fff;
  cursor: pointer;
  outline: none;
}
.form-item input:hover {
  background: #ffa600;
}
</style>

接下来，实现点击Develop组件中的“立即购买”按钮弹出订单对话框并显示数据,Develop代码如下

<div class="form-item btn">
        <input type="button" value="立即购买" @click="orderClick" />
      </div>

orderClick点击事件代码

 orderClick() {
      if (this.selected == '') {
        alert('请选择所在校区')
      } else {
        this.isOrder = true
      }
    }

打开Order组件进行数据渲染，代码如下。

<template>
  <div>
     <table border="0" cellspacing="0" cellpadding="0">
         <tr>
             <td>书籍名称</td>
             <td>购买数量</td> 
             <td>适用校区</td> 
             <td>总价</td> 
         </tr>
          <tr>
             <td>{{params[0]}}</td>
             <td>{{params[1]}}</td> 
             <td>{{params[2]}}</td> 
             <td>{{params[3]}}元</td> 
         </tr>
     </table>
     <div class="form-item">
 <input type="button" value="确定"/>
     </div>
  </div>
</template>
<script>
export default {
  props: {
    params:Array
  }
}
</script>
<style scoped>
table{width: 100%;border:none;border-top: 1px solid #ccc;border-left: 1px solid #ccc;text-align: center}
td{border:none;border-bottom: 1px solid #ccc;border-right: 1px solid #ccc;height: 35px}
table tr:last-child td:last-child{width: 20%;color: #f00}
table tr:first-child{background-color: #e5f0fd;font-weight: bold}
.form-item{margin: 10px 0}
.form-item input {padding: 7px 20px;font: 14px/1.5 "Microsoft Yahei";background: #008aff;border: none;color: #fff;cursor: pointer;outline: none;}
.form-item input:hover{background: #ffa600;}
</style>

要实现从首页点击“立即购买”按钮跳转至详情页，可以在Index组件“立即购买”按钮上设置路由跳转标签< router-link>，传递的参数如下。

 <div class="btn">
            <router-link :to="{ path: 'detail/' + item.name, query: { id: item.id } }">立即购买</router-link>
          </div>

代码中，使用path设置跳转地址和组件名称，使用query传递当前组件的id，Detail组件中可以接收此id然后设置Detail组件左侧图标地址。Detail组件左侧图标地址切换代码如下。

<div class="tipsImg">
        <img :src="changImg[imgNum].imgUrl" alt="" />
      </div>

Detail组件左侧图标相关代码如下。

<script>
export default {
  name:'Detail',
  data () {
      return {
          imgNum:this.$route.query.id-1,        // 接收Index组件传递的id
          changImg:[                            // 小图标地址数组
          {imgUrl:"../../assets/img/1.png"},
         {imgUrl:"../../assets/img/2.png"},
         {imgUrl:"../../assets/img/3.png"},
         {imgUrl:"../../assets/img/4.png"}
        ]
      }
  }
}
</script>           

切换至Develop组件，通过params为标签传递参数，代码如下。 Develop组件的代码以下

<template>
<!-- 我是Develop -->
  <div>
    <div class="hd">
      <h3>移动互联网开发全套书籍</h3>
    </div>
    <div class="tips">
      <p>突破传统教与学，合理利用碎片化学习时间。在线课堂、视频课堂，论坛交流，提供课外知识补充。</p>
    </div>
    <div class="select-menus">
      <div class="form-item book-name">
        <label>书籍名称：</label>
        <button @click="changeItem(index)" :class="isIndex == index ? 'active' : ''" v-for="(book, index) in books" :key="index">
          {{ book.bookname }}
        </button>
      </div>
      <div class="form-item count">
        <label>购买数量：</label>
        <button @click="num <= 1 ? 1 : num--">-</button><input type="text" v-model="num" /><button @click="num++">+</button>
      </div>
      <div class="form-item">
        <label>适用校区：</label>
        <select v-model="selected">
          <option value="" disabled>请选择所在校区</option>
          <option value="武汉校区">武汉校区</option>
          <option value="信阳校区">信阳校区</option>
          <option value="开封校区">开封校区</option>
          <option value="三门峡校区">三门峡校区</option>
        </select>
      </div>
      <div class="form-item">
        <label>总价：</label>
        <span>{{ total }}元</span>
      </div>
      <div class="form-item btn">
        <input type="button" value="立即购买" @click="orderClick" />
      </div>
    </div>
    <!-- / -->
    <Dialog :is-show="isOrder" @is-close="closeDialog">
      <Order :params="[bookName, num, selected, total]"></Order>
    </Dialog>
  </div>
</template>

<script>
import Dialog from '@/views/Dialog.vue'
import Order from '@/views/Order.vue'
export default {
  name: 'Develop',
  components: {
    Dialog,
    Order
  },
  data() {
    return {
      isOrder: false,
      num: 1, // 数量初始化为1
      isIndex: '', // 存储书籍索引编号
      price: 35, // 初始化第一本书籍价格
      bookName: 'C#编程基础', // 初始化第一本书籍名称
      selected: '', // 保存下拉菜单中的值
      books: [
        { bookname: 'C#编程基础', price: 35 },
        { bookname: 'Java语言基础', price: 45 },
        { bookname: 'C#桌面应用程序开发', price: 55 }
      ]
    }
  },
  methods: {
    changeItem(index) {
      // 点击当前书籍按钮显示保存书名及单价
      this.isIndex = index
      this.price = this.books[index].price
      this.bookName = this.books[index].bookname
    },
    closeDialog() {
      this.isOrder = false
    },
    orderClick() {
      if (this.selected == '') {
        alert('请选择所在校区')
      } else {
        this.isOrder = true
      }
    }
  },
  computed: {
    total() {
      return this.num * this.price // 实时计算书籍总价
    }
  }
}
</script>

代码中，传入到Oder组件的参数分别是书籍名称、数量、适用校区及总价。关于详情页左侧链接，点击后跳转到其他子页面的制作方法与Develop组件实现方式相同，这里只介绍左侧链接的实现方法。打开Detail组件，将左侧列表中的代码修改如下。

<template>
<!-- 我是Detail -->
  <div>
    <div class="detail-left">
      <div class="tipsImg">
        <img :src="changImg[imgNum].imgUrl" alt="" />
      </div>
      <!-- 重要代码 以下-->
      <div class="menu">
        <ul>
          <li v-for="(major, index) in majors" :key="major.id">
            <!-- 在<router-link>标签上添加原生点击事件， -->
            <router-link :to="{ path: major.name, query: { id: major.id } }" :class="index == $route.query.id - 1 ? 'active' : ''" @click.native="change(index)"
              >11
              {{ major.title }}
            </router-link>
          </li>
        </ul>
      </div>
    </div>
    <!-- right -->
    <div class="detail-right">
      <router-view></router-view>
      <!-- 显示子路由 -->
      <div class="illustrate">
        <div class="hd">
          <h3>书籍简介</h3>
        </div>
        <div class="describe">
          <p>
            高端专业独享教材：解决学生课堂知识理解及教师教学配套。教材所有内容都是以一个综合项目为目标，每学期的课程内容都是围绕综合项目开展的，同时内含丰富的课程资源及面试题库等企业必备信息库。编撰者均有相关专业多年授课及行业经验，且多为获得相关专业顶级认证的专业人士。
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Detail',
  data() {
    return {
      majors: [
        {
          id: 1,
          title: '移动互联网开发书籍',
          name: 'develop'
        },
        {
          id: 2,
          title: '移动互联网应用书籍',
          name: 'apply'
        },
        {
          id: 3,
          title: '大数据书籍',
          name: '/'
        },
        {
          id: 4,
          title: '人工智能书籍',
          name: '/'
        }
      ],
      imgNum: this.$route.query.id - 1, // 接收Index组件传递的id
      changImg: [
        { imgUrl: require('../../assets/img/logo.png') },
        { imgUrl: require('../../assets/img/logo.jpg') },
        { imgUrl: require('../../assets/img/error.jpg') },
        { imgUrl: require('../../assets/img/系统登录.png') }
      ] // 小图标地址 */
    }
  },
  // 
  methods: {
    change(index) {
      console.log(changeImg[imgNum], 1)
      this.imgNum = index // 点击获取当前索引，并赋值给图标地址
    }
  }
}
</script>

报错
我的需求
(1)需要创建Order组件，在Develop组件中引入Dialog组件，然后将该组件嵌入到Dialog组件中，设置相关参数后即可实现点击关闭功能。
(2)点击Develop组件中的“立即购买”按钮，传递书籍名称、购买数量、适用校区和总价至Order组件中。
(3)在Order组件中布局表格标签，使用props接收来自Develop组件中的参数，通过插值显示获取的相关数据。
(4)从Index组件“立即购买”按钮跳转至Detail组件，可以使用传递路由路径、组件名及对应类别书籍id。
(5)详情页左侧图标显示方式：Detail组件接收来自Index组件传递的id参数，根据id设置对应图标的显示。
(6)详情页左侧栏目切换功能同样使用传递当前data数组中对应组件名和id，其中id用于点击时触发原生事件修改图标地址。
一直报错!!

Answer 1

给src里面加，require，试试