Vue-在data中引入静态图片路径

Coisini_甜柚か

已于 2023-03-16 16:36:51 修改

阅读量6.9k

点赞数 6

分类专栏： vue web前端文章标签： vue web iview

于 2021-09-01 11:23:49 首次发布

本文为Coisini博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_45266979/article/details/120035808

版权

web前端同时被 2 个专栏收录

49 篇文章 0 订阅

订阅专栏

vue

22 篇文章 0 订阅

订阅专栏

本文介绍了在Vue.js项目中如何正确引入和使用静态图片资源，包括直接在template中写入路径、在data中定义、使用import和require的方式。同时，讨论了在使用props和attrs时的困惑，并提供了相关代码示例。通过这些方法，开发者可以解决图片路径识别不了的问题。

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

请添加图片描述

在data中引入静态图片路径

首先tempate中内容都一样：

      <template slot="pic" slot-scope="{ row }">
        <img :src="row.pic" alt="" height="100px" width="100px">
      </template>

图片如果直接写在template中：

<img src="../../../../assets/images/mapicon.png" alt="查看"/>

`data`中直接引入图片的静态地址：

        {
          id: '2',
          name: '王冬冬',
          pic: '../assert/images/4.jpg',
          price: '43.65',
          checked: true,
          count: 2
        },

很奇怪的是，在我这里引入这个不管用，识别不了路径，具体什么原因不清楚，但是我看到很多博主都有阐述，所以这里记录一下。

import直接导入：

首先将图片放在assets文件夹下，然后引用：

import smile from '../assets/images/3.jpg'

data中：

        {
          id: '0',
          name: '王小明',
          pic: smile,
          price: '43.65',
          checked: false,
          count: 0
        },

`require`导入：

          pic: require('../assets/images/5.jpg'),

attrs：

        {
          title: '图片',
          key: 'pic',
          render: (h, params) => {
            return h('img', {
              attrs: {
                src: params.row.pic
              },
              style: {
                height: '100px',
                width: '100px'
              }
            })
          },
          slot: 'pic'
        },

附上源码：

<template>
  <div class="container">
    <h1>LOL英雄皮肤购物车</h1>
    <router-link to="/about">About</router-link>
    <Table :columns="columns1" :data="data1">
      <template v-slot="{row}">
        <Checkbox v-model="row.checked">Checkbox</Checkbox>
      </template>
      <template slot="pic" slot-scope="{ row }">
        <img :src="row.pic" alt="" height="100px" width="100px">
      </template>
      <template slot="total" slot-scope="{ row }">
        <span>{{ conputedTotal(row.price, row.count) }}</span>
      </template>
      <template slot="action" slot-scope="{ row, index }">
        <Button type="error" @click="remove(index)">删除</Button>
      </template>
    </Table>
    <div class="footer">
      <h1>总计：{{ total }}</h1>
      <p>
        <Button type="success" @click="submit(index) ">微信支付</Button>
      </p>
    </div>
  </div>
</template>
<script>
import BigNumber from 'bignumber.js'
import smile from '../assets/images/3.jpg'

export default {
  name: 'Home',
  data () {
    return {
      indeterminate: true,
      checkAll: false,
      checkAllGroup: ['香蕉', '西瓜'],
      columns1: [
        {
          title: '全选',
          key: 'selection',
          type: ''
        },
        {
          title: '序号',
          key: 'name',
          type: 'index'
        },
        {
          title: '名字',
          key: 'name',
          type: ''
        },
        {
          title: '图片',
          key: 'pic',
          render: (h, params) => {
            return h('img', {
              attrs: {
                src: params.row.pic
              },
              style: {
                height: '100px',
                width: '100px'
              }
            })
          },
          slot: 'pic'
        },
        {
          title: '单价',
          key: 'price'
        },
        {
          title: '商品总价',
          slot: 'total'
        },
        {
          title: '数量',
          key: 'count',
          render: (h, params) => {
            return h('div', [
              h('InputNumber', {
                props: {
                  max: 100,
                  min: 0,
                  value: params.row.count
                },
                on: {
                  'on-change': (value) => {
                    console.log(value)
                    this.data1[params.index].count = value
                  }
                }
              })
            ])
          }
        },
        {
          title: '操作',
          key: 'address',
          slot: 'action'
        }
      ],
      data1: [
        {
          id: '0',
          name: '王小明',
          pic: smile,
          price: '43.65',
          checked: false,
          count: 0
        },
        {
          id: '1',
          name: '王筱筱',
          pic: 'https://img2.baidu.com/it/u=1070003001,653753576&fm=26&fmt=auto&gp=0.jpg',
          price: '43.65',
          checked: false,
          count: 0
        },
        {
          id: '2',
          name: '王冬冬',
          pic: '../assert/images/4.jpg',
          price: '43.65',
          checked: true,
          count: 2
        },
        {
          id: '3',
          name: '周小伟',
          pic: require('../assets/images/5.jpg'),
          price: '43.65',
          checked: true,
          count: 0
        },
        {
          id: '4',
          name: '周小深',
          price: '52.13',
          pic: smile,
          checked: true,
          count: 0
        },
        {
          id: '5',
          name: '小小苏',
          pic: require('../assets/images/5.jpg'),
          price: '13.14',
          checked: true,
          count: 0
        }
      ]
    }
  },
  methods: {
    conputedTotal (price, count) {
      return new BigNumber(price).multipliedBy(count).toFixed(2)
    },
    remove (index) {
      this.$Modal.confirm({
        title: '警告',
        content: '确认删除？',
        onOk: () => {
          this.data1.splice(index, 1)
          // this.$Message.info('点击了确定')
        },
        onCancel: () => {
          // this.$Message.info('点击了取消')
        }
      })
    },
    submit () {
      this.$Message.success('提交成功!')
      // eslint-disable-next-line no-undef
    },
    // 商品选择框
    handleCheck (row, index) {
      var check = [] // 保存中间层是否被选中的布尔值
      this.data.forEach((row, index) => {
        if (row.checked) {
          var bool = row.checked.every(crow => crow.checked)
          if (bool) {
            row.checked = true
          } else {
            row.checked = false
          }
          check.push(bool)
        }
      })
    }
  },
  computed: {
    total () {
      const num = this.data1.reduce((a, b) => {
        return new BigNumber(a).plus(new BigNumber(b.count).multipliedBy(b.price))
      }, 0)
      return new BigNumber(num).toFixed(2)
    }
  },
  mounted () {
    this.data1.forEach(row => {
      this.$set(row, 'checked', false) // Vue 解决不能检测到对象属性的添加或删除
      // row.checked = false; //如果为真实数据直接设置的对象改变值不会更新视图
      if (row.checked) {
        row.checked.forEach((crow) => {
          this.$set(crow, 'checked', false)
          // crow.checked = false;
        })
      }
    })
  }
}
</script>
<style scoped>
.container {
  width: 1224px;
  margin: 0 auto;
  text-align: center;
}

.footer {
  text-align: right;
  margin-bottom: 300px;
}
</style>

成品截图：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ymUH27ZG-1630466248210)(C:\Users\Melody\AppData\Roaming\Typora\typora-user-images\image-20210901111556326.png)]$

办法很多，但是sttrs和props的区别，我看不出来，

下面的这段代码搞不懂：

{
  title: '头像', key: 'headimg',
  render: (h, params) => {
    console.log(params.row)
    return h('div', {
      attrs: {
        style: 'width: 40px;height: 40px;'
      },
    }, [
        h('img', {
          props: {
            type: 'primary',
            size: 'small'
          },
          attrs: {
            src: params.row.headimg, style: 'width: 40px;height: 40px;border-radius: 2px;'
          },
          style: {
          },
        }),
      ]);
  }
},