在vue中html img中找不到错误404。

Question

为什么webpack 5和vue 3没有冲浪图像，尽管我选择了正确的。

当我使用webpack 4图片时，可以将其转换为base64，但是当我将插件更新到新版本时，就会出现错误。

   <img src="/src/assets/logo.png"</a>--> error
 <img src="@/assets/logo.png" </a> --> error

在css文件中工作良好(转换为base64)，如果我这样做，它可以工作。

:src="require('@/assets/images/logo.png')"

这是路径图像：

在这里输入图像描述

这是错误404：

在这里输入图像描述

当我获得vue组件的图像时：

 import MyImage from '@/assets/logo.png'

我得到了正确的base64图像

一揽子：

 "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit --coverage",
    "test:e2e": "vue-cli-service test:e2e",
    "lint": "vue-cli-service lint",
    "clean": "rm -rf node_modules target",
    "i18n:report": "vue-cli-service i18n:report --src \"./src/**/*.?(js|vue)\" --locales \"./src/locales/**/*.json\"",
    "test": "vue-cli-service test:unit && vue-cli-service test:e2e"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.1.0",
    "@fortawesome/free-regular-svg-icons": "^6.1.0",
    "@fortawesome/free-solid-svg-icons": "^6.1.0",
    "@fortawesome/vue-fontawesome": "^3.0.0-5",
    "@mdi/font": "5.9.55",
    "@popperjs/core": "^2.11.4",
    "axios": "0.21.4",
    "bootstrap": "^4.6.1",
    "core-js": "3.20.3",
    "jquery": "^3.6.0",
    "paginationjs": "^2.1.5",
    "popper.js": "^1.16.1",
    "properties-to-json": "^0.2.1",
    "roboto-fontface": "*",
    "summernote": "^0.8.18",
    "summernote-cleaner": "^1.0.0",
    "v-pagination-3": "^0.1.7",
    "vee-validate": "^4.5.10",
    "vue": "3.2.31",
    "vue-i18n": "^9.1.0",
    "vue-router": "4.0.11",
    "vue-sweetalert2": "^5.0.2",
    "vue3-summernote-editor": "^1.0.2",
    "vuejs-paginate-next": "^1.0.2",
    "vuetify": "^3.0.0-beta.0",
    "vuex": "4.0.2",
    "webfontloader": "^1.0.0",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "@intlify/vue-i18n-loader": "^3.0.0",
    "@types/jest": "27.4.0",
    "@types/webfontloader": "^1.0.0",
    "@typescript-eslint/eslint-plugin": "5.18.0",
    "@typescript-eslint/parser": "5.18.0",
    "@vue/cli-plugin-babel": "5.0.4",
    "@vue/cli-plugin-e2e-nightwatch": "5.0.4",
    "@vue/cli-plugin-eslint": "5.0.4",
    "@vue/cli-plugin-router": "5.0.4",
    "@vue/cli-plugin-typescript": "5.0.4",
    "@vue/cli-plugin-unit-jest": "^5.0.4",
    "@vue/cli-plugin-vuex": "5.0.4",
    "@vue/cli-service": "~5.0.4",
    "@vue/compiler-sfc": "3.2.11",
    "@vue/eslint-config-typescript": "9.1.0",
    "@vue/test-utils": "2.0.0-rc.14",
    "babel-jest": "26.6.3",
    "chromedriver": "96.0.0",
    "eslint": "^7.5.0",
    "eslint-plugin-vue": "8.6.0",
    "geckodriver": "2.0.4",
    "node-sass": "6.0.1",
    "sass": "^1.38.0",
    "sass-loader": "10.2.0",
    "typescript": "4.5.5",
    "vue-cli-plugin-i18n": "~2.3.1",
    "vue-cli-plugin-vuetify": "~2.4.8",
    "vue-jest": "5.0.0-alpha.10",
    "vuetify-loader": "^2.0.0-alpha.0"
  }

Vue配置：

// vue.config.js
// const path = require('path')
module.exports = {

  // proxy all webpack dev-server requests starting with /api
  // to our Spring Boot backend (localhost:8098) using http-proxy-middleware
  // see https://cli.vuejs.org/config/#devserver-proxy
  configureWebpack: {


      resolve: {
      alias: {
        jQuery: 'jquery',
        $: "jquery",
        jquery: "jquery",
      }
    }
  },
  
  devServer: {


    proxy: {
      '/api': {
        target: 'http://localhost:8098', // this configuration needs to correspond to the Spring Boot backends' application.properties server.port
        ws: true,
        changeOrigin: true
      }
    }
  },

  // Change build paths to make them Maven compatible
  // see https://cli.vuejs.org/config/
  outputDir: 'target/dist',

  assetsDir: 'static',

  pluginOptions: {
    i18n: {
      locale: 'ru',
      fallbackLocale: 'en',
      localeDir: 'locales',
      enableLegacy: false,
      runtimeOnly: false,
      compositionOnly: false,
      fullInstall: true
    },
    vuetify: {
            // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vuetify-loader
        }
  }
};

.eslintrc.js：

module.exports = {

    root: true,
    env: {
        node: true
    },
    'extends': [
        'plugin:vue/vue3-essential',
        'eslint:recommended',
        '@vue/typescript/recommended'
    ],
    parserOptions: {
      ecmaVersion: 2020,
      parser: '@typescript-eslint/parser'
    },
    rules: {
        'vue/multi-word-component-names': 'off',
        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        "@typescript-eslint/no-this-alias": [
            "error",
            {
                "allowDestructuring": false, // Allow `const { props, state } = this`; false by default
                "allowedNames":  ["vm","self","$this"] // Allow `const vm= this`; `[]` by default
            }
        ]
    },

    overrides: [
      {
        files: [
          '**/__tests__/*.{j,t}s?(x)',
          '**/tests/unit/**/*.spec.{j,t}s?(x)'
        ],
        env: {
          jest: true
        }
      },
      {
        files: [
          '**/__tests__/*.{j,t}s?(x)',
          '**/tests/unit/**/*.spec.{j,t}s?(x)'
        ],
        env: {
          jest: true
        }
      }
    ]
}

什么时候我才能修复错误？

Answer 1

这可能是webpack问题，您的图像文件没有正确捆绑。尝试在src中为您的图像使用require()方法。示例：

<img :src="require('@/assets/images/logo.png')">

这确保了文件被捆绑。

干杯:)