Vue框架Vue-cli脚手架引入图片报错

Vue框架Vue-cli脚手架引入图片报错

一、import导入图片方法

第一步：在.vue文件中import edit from ‘path’（path是图片与.vue的相对路径）

第二步：在data对象中定义一个属性edits，值对应edit

第三步：在template中 给标签绑定属性

<template>
    <img :src="picUrl"/>
</template>
 
<style>
 
</style>
 
<script>
 
//首先要引入图片
import pic from "@/assets/logo.png";
 
export default{
 
    data(){
        return {
                //在引用图片
              picUrl:pic,
       }
  
   }
}
 
 
 
</script>

二、将图片保存在public静态包下，进行访问

直接讲例子：

定义组件，在组件中加入图片，

注意：图片必须复制到public静态包下，

在访问的地址直接用：‘/图片名’ 就可以了

把案例代码给大家看看

<template>
  <div>
      <table border="1">
        <tr>
          <td>书名</td>
          <td>图片</td>
          <td>价格</td>
        </tr>
        <tr v-for="book in books" v-bind:key="book">
          <td>{{book.name}}</td>
          <td>
            <img :src="book.url" width="50px" height="50px">
          </td>
          <td>{{book.price}}</td>
        </tr>
      </table>
      <student></student>
  </div>
</template>

<script>
  import Student from  './Student.vue'

  export default {
    name: "Books",
    data(){
      return{
        books:[
          {name:'追风筝的人',url:"/飞猪3.png",price:28},
          {name:'浮生六记',url:'/飞猪3.png',price:38},
          {name:'城南旧事',url:'/飞猪3.png',price:48},
          {name:'活着',url:'/飞猪3.png',price:60},
          {name:'檀香刑',url:'/飞猪3.png',price:68},
        ]
      }
    },
    components: {
      Student
    }
  }
</script>

<style scoped>

</style>

运行效果：

yle scoped>

```

运行效果：

[外链图片转存中…(img-C5nLeHt1-1597056022572)]