webpack 解析VUE script中的资源文件

需求：

使用iview框架的table，需要显示图片，该框架是使用render函数生成的，图片的资源文件是服务器的路径。

问题描述：

由于webpack只能识别HTML和style中的静态资源文件，但是JS中的动态资源文件没有办法识别，导致JS的路径直接在HTML代码中显示。由于VUE2文件的路径是需要编译后的目录，而不是源代码的目录，导致编译后的资源文件找不到。

解决办法：

使用webpack的require方法做转义

扫描二维码关注公众号，回复： 276671 查看本文章

<template>
    <div>
        <img src="../../../assets/img/BI_login.svg"/>
        <Table border :columns="columns7" :data="data6"></Table>
    </div>
</template>

<script>
export default {
    data () {
        return {
            columns7: [
                {
                    title: '姓名',
                    key: 'name',
                    render: (h, params) => {
                        var imgUrl = require('../../../assets/img/' + params.row.img);
                        return h('div',{
                                attrs: {
                                    style:'width:50px;height: auto'
                                },
                            }, [
                                h('img', {
                                    // 正常的 HTML 特性
                                    attrs: {
                                        src: imgUrl,
                                        style:'width:100%;height: auto'
                                    },
                                    // DOM 属性
//                                    domProps: {
//                                        src: require('../../../assets/img/BI_login.svg')
//                                    },
                                }),
                                h('strong', params.row.name)
                        ]);
                    }
                },
                {
                    title: '年龄',
                    key: 'age'
                },
                {
                    title: '地址',
                    key: 'address'
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 150,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.show(params.index)
                                    }
                                }
                            }, '查看'),
                            h('Button', {
                                props: {
                                    type: 'error',
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        this.remove(params.index)
                                    }
                                }
                            }, '删除')
                        ]);
                    }
                }
            ],
            data6: [
                {
                    name: '王小明',
                    img:"BI_login.svg",
                    age: 18,
                    address: '北京市朝阳区芍药居'
                },
                {
                    name: '张小刚',
                    age: 25,
                    img:"BI_login.svg",
                    address: '北京市海淀区西二旗'
                },
                {
                    name: '李小红',
                    age: 30,
                    img:"BI_logo.svg",
                    address: '上海市浦东新区世纪大道'
                },
                {
                    name: '周小伟',
                    age: 26,
                    img:"icon_noData.svg",
                    address: '深圳市南山区深南大道'
                }
            ]
        }
    },
    methods: {
        show (index) {
            this.$Modal.info({
                title: '用户信息',
                content: `姓名：${this.data6[index].name}<br>年龄：${this.data6[index].age}<br>地址：${this.data6[index].address}`
            })
        },
        remove (index) {
            this.data6.splice(index, 1);
        }
    }
}
</script>