首页 > 其他分享 >svg图片放img标签报错解决办法

svg图片放img标签报错解决办法

时间:2024-06-03 11:13:40浏览次数:14  
标签:img svg 报错 标签 import data

错误代码:

<div v-if="item.showType == '2'" :id="'tag'+index" class="tag-icon-text" @click="tagClick(item)">
<img src="@/assets/images/flag.jpg" class="img" />
<span v-html="item.name"/>
</div>

修改如下:

1、通过import引入svg图标

import flagSvg from "@/assets/images/flag.svg"

2、data数据模型中使用

data() {
      return {
        flagSvgUrl: flagSvg
      };
    },        

3、在img标签中使用

<div v-if="item.showType == '2'" :id="'tag'+index" class="tag-icon-text" @click="tagClick(item)">
        <img :src="flagSvgUrl" class="img" />
        <span v-html="item.name"/>
</div>

 

标签:img,svg,报错,标签,import,data
From: https://www.cnblogs.com/zwh0910/p/18228384

相关文章