Nuevo desarrollador de reacción, estoy usando un paquete web e intento cargar la imagen, pero no la muestra y no me da ningún error, ¿alguna idea?
paquete web:
module.exports = { module: { rules: [ { test: /\.(ts|js)x?$/, exclude: /node_modules/, use: { loader: 'babel-loader', }, }, { test: /\.css$/, use: ['style-loader', 'css-loader'], }, { test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/, loader: 'url-loader?limit=100000', }, ], }, resolve: { extensions: ['*', '.js', '.jsx', '.tsx', '.ts'], }, }; import Immage from '../../icons/MicrosoftTeamsImage.png'; <img src={require('../../icons/MicrosoftTeamsImage.png')} alt="icon" /> also tried like this: <img src={Immage} alt="some example image" alt="icon" />se muestra así:
los que instalé así: yarn add --save file-loader url-loader
editar: revisé la pestaña de red y el estado es 200, pero muestra URL de solicitud: http://..../[object%20Module] Traté de arreglarlo así <img src={require('../. ./icons/MicrosoftTeamsImage.png').default} alt="icon" /> y ahora dice: Solicitar URL: http://..../29691089ca26d06beb2854d687a560cf.png pero aún no se muestra la imagen
Tome los íconos del directorio que contiene la imagen y colóquelos dentro del directorio src .
Luego ajuste la ruta de la imagen para que sea como:
import Immage from '../icons/MicrosoftTeamsImage.png';Y luego usa esta sintaxis:
<img src={Immage} alt="some example image" alt="icon" />