Vue有没有好的办法替换原生HTML的标签呢

Question

有这么一个场景，想要不入侵代码。
比如想把img标签替换成div标签，然后用background-image作为样式。

目前我的做法是：

1. 先设置Vue.config.isReservedTag = () => false;绕过Vue对组件名称的限制。

2. 创建一个name是img的组件，比如这样

   <template>
     <div
        class="web_img"
        :style="src | backgroundImage(styles)"
     />
   </template>
   
   <script>
   export default {
    name: 'img',
    props: ['src'],
   }
   </script>

是可以替换成功的，但是就有一个问题无法解决。
比如有页面有一些样式是直接应用到img标签上的：

.class-name img {
    width: 100px;
    height: 100px;
}

这样替换后变成了div，就没办法用到这些样式了

Answer 1

那你加个样式，让所有的img都不显示，但是占据位置。

img{
    visibility: hidden;
}

其实不是很明白为什么要这样搞？如果是为了图片不留拉伸，你可以试试 object-fit

已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入。