webpack 我得到错误404没有在html中找到img in vue

mv1qrgav  于 2023-01-05  发布在  Webpack
关注(0)|答案(1)|浏览(148)

为什么webpack 5和vue 3不surch图像,即使我选择了正确的。
当我使用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')"

这是路径图像:
enter image description here
404错误提示
enter image description here
当我得到图像到vue组件时:

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

我得到正确base64图像
Package :

"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
        }
  }
};

西班牙司法协会:

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
        }
      }
    ]
}

我什么时候可以修复错误?

yeotifhr

yeotifhr1#

这可能是webpack的问题,因为您的图像文件没有正确绑定。请尝试在src中使用require()方法处理图像。示例:

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

这可确保文件被捆绑。
干杯:)

相关问题