直接在html中渲染方式:

需要实现从本地目录下去获取所有的svg图标进行预览将选中的图片显示在另一个地方再上传。

const

require.context(static/topology/icon,

false,

返回一个数组,存储的是base64字符串这个字符串是一段base64编码后的SVG图片数据可以直接在HTML/CSS中使用进行图片的预览

const

require.context(static/topology/icon,

false,

types/webpack-env{compilerOptions:

{//

将base64字符串直接绑定到img的src上一般用于图片的预览。

div

div:titleitem.name.split(.)[0]img

:srcitem.url

${window.__ctx}/static/icon/${iconName}.svg;//发起ajax请求获取SVG文件const

res

$(res).find(svg);console.log(svg:,

svg);//打印见下图2if

iconImage绑定到div的v-html就可以显示了iconImage.value

svg.prop(outerHTML);console.log(iconImage:,

将svg图片变成文件待上传//注意这里传的一定是svg字符串而且type一定是image/svgxml格式这边之前踩了坑iconFile.value

new

【图2】是一个svg元素可使用$(res).find(svg)去获取.

将获取到的SVG文件内容转换成jQuery对象然后通过jQuery对象的find()方法筛选出其中的SVG元素。

const

xmlDoc.getElementsByTagName(path);【图3】svg元素的内容通过svg.prop(outerHTML)可以得到。

112px;

#c3cdd7clickshowIconDialogv-htmliconImage/div小插曲

XMLDocument],