在vue中插入xml文件来动态控制某些图片的显隐

需求：项目打包后有些敏感图片的显示。可以在static/public静态文件夹下创建一个xml文件，定义一个变量。通过修改xml的变量的true/false来控制图片的显隐

vue如何读取xml文件

注意：v-if的值如果为字符串“true/false”,不能显示或隐藏，需要转换为逻辑型。

<template>
	<div>
		<img v-if="flag" src="../../../public/img/fontTitle.png"  alt="">
	</div>
</template>
<script>
	export default {
		data () {
		    return {
		      flag: null,
		    };
  		},
  		created () {
		    axios.get('http://localhost:8080/test.xml').then(response => {
		      var xmlText = response.data;
		      // console.log(xmlText)
		      let div = document.createElement("div");
		      div.innerHTML = xmlText
		      this.flag = div.getElementsByTagName("title")[0].textContent;
		      // console.log('flag',this.flag)
		      if(this.flag==="true") {
		        this.flag = true
		      }
		      else if (this.flag==="false") {
		        this.flag = false
		      }
		    });
		  },
	}
</script>

打印的内容