reactjs - importar - react imagenes
Mostrar una imagen estática usando React, Typescript y Webpack (3)
El error, TS2307: Cannot find module ''../images/kitten-header.jpg'' , resalta que el compilador de TypeScript no comprende la importación de un archivo .jpg.
La configuración del paquete web está bien, como lo demuestra el archivo de imagen que se está copiando a la carpeta dist con éxito a pesar del error de compilación.
Hay dos formas en que podemos resolver el problema.
En primer lugar , podríamos pasar por alto la importación de TypeScript utilizando una declaración ''require''. Para hacer esto, la importación ...
import kittenHeader from ''../images/kitten-header.jpg'';
... puede ser reemplazado por un requerimiento ...
const kittenHeader = require(''../images/kitten-header.jpg'');
... y eso debería ser todo lo que se necesita.
Tenga en cuenta que, en mi caso, también necesité instalar algunos typings para soportar la declaración ''require''. Sin estos, TS2304: Cannot find name ''require'' un TS2304: Cannot find name ''require'' error.
Originalmente, utilicé @types/node , como se describe en esta respuesta SO , pero @EvanSebastian señaló que el nodo está destinado a admitir la escritura de módulos NodeJS, que no es lo que estoy haciendo (ver comentarios sobre la pregunta).
@types/webpack-env , como se sugirió, pero esto dio como resultado un TS2322: Type ''{ src: {}; }'' is not assignable to type ''HTMLProps<HTMLImageElement>''. TS2322: Type ''{ src: {}; }'' is not assignable to type ''HTMLProps<HTMLImageElement>''. error en contra de la propiedad src de mi etiqueta de imagen.
Más recientemente, @types/requirejs a usar @types/requirejs , y espero que esté lo suficientemente enfocado como para evitar incluir una carga de tipos adicionales inapropiados. Actualmente está trabajando:
npm install @types/requirejs --save-dev
Alternativamente , podríamos conservar la importación y proporcionar un archivo d.ts con información de tipo que declare un módulo apropiado. No he podido descubrir exactamente cómo se vería este archivo.
Intento mostrar una imagen en un componente React como parte de un proyecto usando webpack y webpack-dev-server.
Hasta ahora he completado los siguientes pasos:
- Npm usado para instalar el cargador de archivos
- Actualizado webpack.config.js para agregar un cargador para archivos de imagen
- Importé la imagen que quiero en mi componente
- Usé la importación en mi etiqueta img
Una vez realizados estos pasos, el paquete web no compila con un error de ''no se puede encontrar el módulo'':
ERROR in [at-loader] ./src/components/App.tsx:4:26
TS2307: Cannot find module ''../images/kitten-header.jpg''.
Mi estructura de carpetas es la siguiente:
/dist
/images
kitten-header.jpg
bundle.js
bundle.js.map
/node_modules
(content ignored for brevity)
/src
/components
App.tsx
/images
kitten-header.jpg
/styles
App.less
index.tsx
index.html
package.json
tsconfig.json
webpack.config.js
El nuevo cargador que agregué a mi webpack.config.js es:
test: //.(jpe?g|gif|png|svg)$/, loader: "file-loader?name=./images/[name].[ext]"
He importado el archivo de imagen, en App.tsx, así:
import kittenHeader from ''../images/kitten-header.jpg'';
... y usé la importación en una etiqueta img como esta:
<img src={ kittenHeader } />
Nota: El texto completo de webpack.config.js y App.tsx fue proporcionado hasta que me acerqué un poco a la respuesta y me di cuenta de que no eran relevantes (ver actualización 1).
Supongo que estoy cometiendo un error muy trivial con respecto a la ruta relativa en la importación. Como se puede imaginar, he probado varias alternativas.
¿Alguien puede dar alguna idea?
Como referencia, ya que continuamente estoy accediendo a artículos y preguntas relacionadas con la versión incorrecta del paquete web, estas son mis versiones:
- Reaccionar 15.5.4
- Webpack 2.6.1
- Webpack-dev-server 2.4.5
- TypeScript 2.3.2
Entonces, mirando esta pregunta SO y esta publicación en Medium , he podido identificar que el problema no radica en cómo he usado el paquete web, sino en el hecho de que estoy usando TypeScript. El error es un error mecanografiado causado por el hecho de que el compilador de tipos no sabe qué es un archivo .jpg.
Aparentemente, voy a necesitar proporcionar un archivo d.ts o usar una declaración de requerimiento.
Casi ahí ...
Así es como lo hago funcionar:
// This declaration can be move in some common .d.ts file, will prevent tslint from throwing error
declare function require(path: string);
const SampleComponent = () => (
<div>
<img src={require(''./styles/images/deadline.png'')} alt="Test" />
</div>
);
La forma en que usted propuso en su respuesta terminará escribiendo una declaración de módulos para cada archivo de imagen que se coloca en los componentes.
Con requiere regular, así es como lo uso en un archivo tsx:
const logo = require(''../assets/logo.png'');
...
<img alt=''logo'' style={{ width: 100 }} src={String(logo)} />
Espero que esto ayude. import no funcionó para mí, tampoco.