＜img/＞和<el-image>报错,怎么解决?

Question

ESLint: Disallow self-closing on HTML void elements (<img/>).(vue/html-self-
和
ESLint: Require self-closing on Vue.js custom components (<el-image>).(vue/h
都是正常写的。不知道哪里错了。
该怎么设置呢？


我的配置：

> module.exports = {
    parserOptions: {
        parser: 'babel-eslint',
 sourceType: 'module'
 },
 env: {
        browser: true,
 node: true,
 es6: true,
 },
 extends: ['plugin:vue/recommended', 'eslint:recommended'],
 rules: {
        "no-unused-vars":"off",
 "vue/html-self-closing": ["error", {
            "html": {
                "void": "always",
 "normal": "never",
 "component": "always"
 },
 "svg": "always",
 "math": "always"
 }],
 }
}

Answer 1

<el-image> 标签如果是空的，就不需要结束标签，单个标签就行了
<el-image :sre='item.src' :preview-src-list='item.url' />

至于上面的ESlint报错，我也不知道为什么，但是根据MDN

拉倒最下面，有明确说明： 空标签，只能有开始，不能有结束， 所以它是典型的 self-closing 标签， 至于为啥Eslint会报错，你看看你们配eslint配置怎么写的吧

Answer 2

一个是不允许html void元素自闭合，一个是自定义组件要求自闭和。改成如下：

<img :src="wxImgSrc" alt="微信二维码">

<el-image :src="item.url" :preview-src-list="item.url" />

或者修改你的.eslintrc.js文件 'vue/html-self-closing' 配置

Answer 3

ESLint配置问题

根目录找到 .eslintrc.js文件，如没有，先创建，然后在rules中添加以下配置，

module.exports = {
    rules: {
        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'generator-star-spacing': 'off',
        "vue/html-self-closing": ["error",{
          "html": {
            "void": "never",
            "normal": "any",
            "component": "any"
          },
          "svg": "always",
          "math": "always"
        }]
      }
 }