根据文件路径获取图片并赋值给src属性

我要冲啦个人网站建设2024-06-18web前端

模板部分:

    <div class="image-div">

        <el-image

            class="image-item"

            :src="fileUrl_blob ? fileUrl_blob : fileBigUrl_blob"

            :preview-src-list="[fileBigUrl_blob]">

        </el-image>

    </div>

 

js部分:

赋值:

    data(){

        return{

            fileUrl_blob: '',

            fileBigUrl_blob: ''

        }

    }

调用:

    this.loadFile('fileUrl_blob', this.fileUrl));

根据文件路径加载图片的具体实现方法:

        loadFile(fieldname, fileUrl) {

            if (!fileUrl) {

                this[fieldname] = '';

                return

            }

            request({

                url: fileUrl,

                method: 'get',

                responseType: 'blob'

            }).then(response => {

                const suffixIndex = fileUrl.lastIndexOf(".");

                const suffix = fileUrl.substring(suffixIndex + 1).toLowerCase();

                const blob = new Blob([response], { type: 'image/' + suffix + (suffix == 'svg' ? '+xml' : '') });

                this[fieldname] = URL.createObjectURL(blob);

            })

            .catch(error => {

                console.error('There was an error fetching the image:', error);

                this[fieldname] = '';

            });

        }

文章关键词
根据文件路径获取图片