"Es posible que necesite un cargador adecuado para manejar este tipo de archivo". en el proyecto Vue.js

Tiberiu Oprea

Recibo el siguiente error cuando intento ejecutar "gulp" en mi proyecto vue.js después de haber agregado una etiqueta de imagen en mi componente Home.vue [ <img class="img-fluid" src="../images/logoWhite.png">]:

stream.js:74
      throw er; // Unhandled stream error in pipe.
      ^
 Error: ModuleParseError: Module parse failed: G:\Projects\Cakes\src\images\logoWhite.png Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '�' (1:0)

Leí que este error podría ser causado por babel y cómo está configurado en webpack.config.js. Después de probar algunas de las soluciones enumeradas, todavía no he logrado que funcione. También intenté crear un archivo '.babelrc' con las condiciones preestablecidas para babel, pero aún así no funcionó.

Así es como se ve el archivo 'webpack.config.js':

var webpack = require('webpack')

module.exports =  {
  entry: [
    './src/main.js'
  ],
  output: {
    path: "/dist/js",
    publicPath: "/dist/",
    filename: "app.js"
  },
  watch: true,
  module: {
    loaders: [
      {
        test: /\.js$/,
        // excluding some local linked packages.
        // for normal use cases only node_modules is needed.
        exclude: /node_modules|vue\/src|vue-router\//,
        loader: 'babel'
      },
      {
        test: /\.scss$/,
        loaders: ['style', 'css', 'sass']
      },
      {
        test: /\.vue$/,
        loader: 'vue'
      }
    ]
  },
  babel: {
    presets: ['es2015'],
    plugins: ['transform-runtime']
  },
  resolve: {
    modulesDirectories: ['node_modules']
  }
}

En package.json, tengo los siguientes paquetes como mis devDependencies para babel:

"babel-core": "^6.1.21",
"babel-loader": "^6.1.0",
"babel-plugin-transform-runtime": "^6.1.18",
"babel-preset-es2015": "^6.13.2",
"babel-runtime": "^6.3.13"

Gracias de antemano chicos!

Jon Hall

La templatesección de un .vuearchivo se carga usando vue-html-loader , que intentará cargar recursos locales (como srcvalores de etiquetas de imagen ) usando require(<resource>)( detalles ).

El error anterior se debe al hecho de que no tiene una configuración de cargador de paquete web para manejar .pngarchivos, para solucionarlo necesitaría instalar y configurar un cargador adecuado; algo como esto, con url-loader , debería funcionar:

{ test: /\.png$/, loader: "url-loader?mimetype=image/png" }

Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.

En caso de infracción, por favor [email protected] Eliminar

Editado en
0

Déjame decir algunas palabras

0Comentarios
Iniciar sesiónRevisión de participación posterior

Artículos relacionados

Error en el cargador de CSS del paquete web: "Es posible que necesite un cargador adecuado para manejar este tipo de archivo".

Haga clic para abrir el PDF: es posible que necesite un cargador adecuado para manejar este tipo de archivo

Cómo corregir el error "Es posible que necesite un cargador adecuado para manejar este tipo de archivo"

Haga clic para abrir el PDF: es posible que necesite un cargador adecuado para manejar este tipo de archivo

Cómo corregir el error "Es posible que necesite un cargador adecuado para manejar este tipo de archivo"

Es posible que necesite un cargador adecuado para manejar este tipo de archivo, cargando la imagen en react

Compilación del paquete web de Vue: error. Es posible que necesite un cargador adecuado para manejar este tipo de archivo

Cómo corregir el error del paquete web: "es posible que necesite un cargador adecuado para manejar este tipo de archivo". cuando uso webpack para cargar archivos css

Error al importar el módulo de nodo a través de Webpack, "Es posible que necesite un cargador adecuado para manejar este tipo de archivo"

Error al importar el módulo de nodo a través de Webpack, "Es posible que necesite un cargador adecuado para manejar este tipo de archivo"

Cómo corregir el error del paquete web: "es posible que necesite un cargador adecuado para manejar este tipo de archivo". cuando uso webpack para cargar archivos css

El análisis del módulo falló: carácter inesperado '@' (1: 0): es posible que necesite un cargador adecuado para manejar este tipo de archivo

No se puede ejecutar webpack-dev-server en react-native-web. ERROR: es posible que necesite un cargador adecuado para manejar este tipo de archivo

glsify - error '¿Es posible que necesite un cargador adecuado para manejar este tipo de archivo'?

Error de ReactJS Es posible que necesite un cargador adecuado para manejar este tipo de archivo

glsify - error '¿Es posible que necesite un cargador adecuado para manejar este tipo de archivo'?

IMAGEN: es posible que necesite un cargador adecuado para manejar este tipo de archivo

JSX: es posible que necesite un cargador adecuado para manejar este tipo de archivo

Error: es posible que necesite un cargador adecuado para manejar este tipo de archivo

Webpack 2: es posible que necesite un cargador adecuado para manejar este tipo de archivo React

Webpack 2: es posible que necesite un cargador adecuado para manejar este tipo de archivo React

Webpack Es posible que necesite un cargador adecuado para manejar este tipo de archivo, con sue

"Es posible que necesite un cargador adecuado para manejar este tipo de archivo"

Error: es posible que necesite un cargador adecuado para manejar este tipo de archivo

"Es posible que necesite un cargador adecuado para manejar este tipo de archivo" con Webpack y Babel

cómo solucionar este error Es posible que necesite un cargador adecuado para manejar este tipo de archivo

index.ngfactory.ts Token inesperado, es posible que necesite un cargador adecuado para manejar este tipo de archivo

Solicitud de origen cruzado a API para datos JSON: "Es posible que necesite un cargador adecuado para manejar este tipo de archivo".

"Es posible que necesite un cargador adecuado para manejar este tipo de archivo, actualmente no hay ningún cargador configurado para procesar este archivo".

TOP Lista

  1. 1

    ¿Cómo ocultar la aplicación web de los robots de búsqueda? (ASP.NET)

  2. 2

    Pagination class not getting applied in html

  3. 3

    Pandas의 CSV 파일을 Pandas 데이터 프레임으로 가져 오기

  4. 4

    Opción de máquina virtual no reconocida 'MaxPermSize = 512m' cuando se ejecuta Zeppelin

  5. 5

    OpenQA.Selenium.NoSuchElementException-C # 셀레늄

  6. 6

    OAuth 2.0 utilizando Spring Security + WSO2 Identity Server

  7. 7

    ¿Cómo pintar el Dropline de un RowHeader-JTable en el Main-JTable durante un DragAndDrop?

  8. 8

    Joindre avec des valeurs séparées par des virgules dans SQL Server Compact ne fonctionne pas

  9. 9

    Recherche de la position d'index d'une valeur dans r dataframe

  10. 10

    GPU를 사용하여 ffmpeg 필터의 처리 속도를 가속화하는 방법은 무엇입니까?

  11. 11

    caída condicional de filas desde un marco de datos de pandas

  12. 12

    python: ¿por qué dice variable indefinida cuando llamo función?

  13. 13

    Error: la ejecución falló para la tarea ': app: compileDebugJavaWithJavac'. java.io.FileNotFoundException:

  14. 14

    ¿Cómo especificar el puerto en el que se aloja una aplicación ASP.NET Core?

  15. 15

    Que signifie Decimal (-1)?

  16. 16

    Link library in Visual Studio, why two different ways?

  17. 17

    ¿Cómo determinar la menor cantidad de incrementos de Y necesarios para trazar un múltiplo de 5 en una gráfica?

  18. 18

    nested observables executed one after the other after termination

  19. 19

    uitableview delete button image in iOS

  20. 20

    C # cómo eliminar la última línea de un bucle

  21. 21

    R - ggplot2 - use raster as greyscale basemap

CalienteEtiquetas

Archivo