vue中render函数中img的src直接加载路径无效

问题:vue中render函数中img的src直接加载路径无效

解决:

js代码:

第一种方案:通过js引入

<script>
//1、引进来
import img1 from "../../../assets/images/u52.png";
export default {
  name: "Orgstru",
  data() {
    return {
      columns7: [
        {
          title: "模板编号",
          key: "id",
          align: "center"
        }
        {
          title: "操作",
          key: "action",
          width: 200,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "div",
                {
                  style: {
                    width: "32%",
                    marginRight: "2%",
                    display: "inline-block",
                    color: "#1abc9c"
                  },
                  on: {
                    click: () => {
                      this.show(params.index);
                    }
                  }
                },
                [
                  h("img", {
                    attrs: {
                      //2、使用
                      src: img1
                    },
                    style: {
                      width: "17px",
                      verticalAlign: "middle"
                    }
                  }),
                  "查看"
                ]
              )
            ]);
          }
        }
      ]
    };
  },
  methods: {}
};
</script>

第二种方案:使用base64字符串引用

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
在 `el-table` 使用 `v-html` 渲染后,可以通过在 `cell-class-name` 属性自定义样式,然后通过 `render` 函数获取当前单元格的 `img` 标签,并进行判断。 具体实现步骤如下: 1. 在 `el-table` 使用 `cell-class-name` 属性,自定义单元格的样式类名。 2. 在 `render` 函数,获取当前单元格的 `img` 标签,并进行判断。 以下是一个示例代码: ```html <template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="content" label="内容" :cell-class-name="getCellClassName"> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { content: '<p>这是一段包含<img src="xxx" alt="图片描述">图片的文本</p>' } ] } }, methods: { getCellClassName({ row, column, rowIndex, columnIndex }) { return 'my-cell-class' } }, render: function(h, { row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { const htmlStr = row[column.property] const div = document.createElement('div') div.innerHTML = htmlStr const imgList = div.querySelectorAll('img') imgList.forEach(img => { if (img.alt === '图片描述') { // 图片描述为"图片描述"的处理逻辑 } }) return h('div', htmlStr) } } } </script> <style> .my-cell-class { padding: 0 !important; /* 去除单元格内边距 */ } .my-cell-class > div { padding: 10px; /* 设置单元格内边距 */ } </style> ``` 在上面的代码,我们在 `getCellClassName` 方法返回了自定义的样式类名 `my-cell-class`,并在样式设置了 `padding: 0 !important` 去除单元格内边距,然后在 `render` 函数获取当前单元格的 `htmlStr`,并使用 `querySelectorAll` 方法获取其的 `img` 标签,进行判断。最后,使用 `h` 函数生成一个新的 `div` 元素,并将 `htmlStr` 作为其子元素返回。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值