1

Verán, quiero mostrar en mi proyecto imágenes almacenadas en una carpeta de mi proyecto. Normalmente hago esto:

import React from 'react';
import { Link } from 'react-router-dom';
import arranque from '../images/arranque.png';

const Inicio = () => {
  return (
    <main className="Wrap">
      <h1>
        <u>¡Bienvenido a los Concesionarios Max!</u>
      </h1>
      <p>
        ¿Buscas un coche de última gama? ¿Uno barato? ¿Uno con mucho espacio?
        <br />
        Sea cual sea el coche que estes buscando, ¡Aquí lo encontrarás!
      </p>
      <Link to="/coche">
        <button className="VcButton">Lista de Coches</button>
      </Link>
      <ul>
        <img src={arranque} alt="Error" />
      </ul>
    </main>
  );
};

export default Inicio;

introducir la descripción de la imagen aquí

La imagen se muestra, pero no puedo estar para cada imagen importándola, pues imaginemos que estoy mirando la variable foto de una tabla SQL... Buscando por internet, me encontré con que mi solución eran las etiquetas react:

import React from 'react';
import { Link } from 'react-router-dom';
import { Image } from 'react-native';

const Inicio = () => {
  return (
    <main className="Wrap">
      <h1>
        <u>¡Bienvenido a los Concesionarios Max!</u>
      </h1>
      <p>
        ¿Buscas un coche de última gama? ¿Uno barato? ¿Uno con mucho espacio?
        <br />
        Sea cual sea el coche que estes buscando, ¡Aquí lo encontrarás!
      </p>
      <Link to="/coche">
        <button className="VcButton">Lista de Coches</button>
      </Link>
      <ul>
        <Image source={require('../images/arranque.png')} />
      </ul>
    </main>
  );
};

export default Inicio;

introducir la descripción de la imagen aquí

Pero parece que algo falla que me causa este error. Instale en la carpeta client de mi proyecto el react-native, pero el mensaje da a entender que el proyecto no lo detecta. ¿Que me estará fallando?

Actualizo: Esta es la foto que uso y la ruta donde está. introducir la descripción de la imagen aquí

Esta en client/src/images.

Más información: He añadido webpack en la carpeta client mediante yarn add webpack, después cree un fichero webpack.config.js en la carpeta client. introducir la descripción de la imagen aquí

Dicho fichero tiene el siguiente código:

import ExtractTextWebpackPlugin from 'extract-text-webpack-plugin';

module.exports = {
  entry: './src/app.js',
  output: {
    path: './dist',
    filename: 'app.bundle.js',
  },
  plugins: [new ExtractTextWebpackPlugin('app.bundle.css')],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextWebpackPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader',
        }),
      },
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015'],
        },
      },
      {
        test: /\.(png|jpg|gif)$/,
        exclude: /(node_modules)/,
        loader: 'file-loader',
      },
    ],
  },
};

Pero aún no se cargan las imágenes. ¿Que más necesito?

Más datos: Me he hizo a la etiqueta client y he añadido file loader mediante yarn add file-loader. Después he modificado webpack.config.js:

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
    ],
  },
};

Pero aún no se carga mi imagen. Aunque ahora me aparece un error en la terminal: introducir la descripción de la imagen aquí

Parece un error con el proxy. Este es el archivo package.json, donde aparece al principio la mención al proxy 6000:

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:6000",
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "file-loader": "^6.2.0",
    "node-sass": "^4.14.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-native": "^0.63.3",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.0",
    "sass": "^1.29.0",
    "web-vitals": "^0.2.4",
    "webpack": "^5.5.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Tal y como aparece, hace la llamada al localhost:6000. El server usa un port a 5001, y el client a 3000.

Aparte, este es el estilo de las imágenes, que esta en un fichero llamado _page.scss:

img {
  width: 50px;
  height: 50px;
  border: 1px solid black;
}
2
  • Cómo es la estructura de archivos de la aplicación? Y react-image.png no es arranque.png. Borraste una imagen y aun tienes la referencia?
    – milmal
    el 16 nov. 2020 a las 18:54
  • @milmal he añadido más información, a ver si así lo entiendes mejor. el 16 nov. 2020 a las 19:09

1 respuesta 1

1

Programas de ReactNative son applicaciones para dispositivos mobiles, no se puede usar directamente entre codigo de React.js, aun son vecinos technologicamente.

Para alcanzar lo que estas intentando de lograr, mejor es de usar WebPack on unos trucos especiales y ya, puedes usar imagenes dinamicamente.

Truco primero:

const imagen = './gato.png'  
<img src={require(`${imagen}`)} alt="producto" />

En eso, observa el uso de puntuacion con el nombre de variable imagen. Todos los puntuaciones se necesitan, para el WebPack lo entienda.

Truco segundo, lo que hace todo vivo:

{
     test: /\.(png|jpg|gif)$/,
     use: [
         {
             loader: 'file-loader',
             options: {}
         }
     ]
 }

Eso se pone en webpack.config.js para que el entienda sobre imagenes de tipos png, jpg y gif.

Un webpack configuracion completo sera algo asi:

var HtmlWebpackPlugin =  require('html-webpack-plugin')
var ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')

module.exports = {
  entry : './src/app.js',
  output : {
    path : './dist',
    filename : 'app.bundle.js'
  },
  plugins : [
  new ExtractTextWebpackPlugin('app.bundle.css')],
  module : {
    rules : [{
      test : /\.css$/,
      use : ExtractTextWebpackPlugin.extract({
        fallback : 'style-loader',
        use: 'css-loader'
      })
    },{
      test: /\.js$/,
      exclude: /(node_modules)/,
      loader: 'babel-loader',
      query: {
        presets: ['react','es2015']
      }
    },{
      test :  /\.(png|jpg|gif)$/,
      exclude: /(node_modules)/,
      loader : 'file-loader'
    }]
  }
}

Mis fuentes de informacion desde SO en ingles:

[1] https://stackoverflow.com/questions/32612912/dynamically-add-images-react-webpack/45272215#45272215

[2] https://stackoverflow.com/questions/37644265/correct-path-for-img-on-react-js/49712783#49712783

[3] https://stackoverflow.com/questions/41947474/dynamically-loading-local-images-with-reactjs/46079722#46079722

[4] https://stackoverflow.com/questions/45334874/load-images-based-on-dynamic-path-in-reactjs/45334965#45334965

Mas informacion sobre WebPack (y Babel cual es tambien en mi configuracion de ejemplo):

[5] https://medium.com/@yabikusensei/configurar-babel-webpack-loaders-plugins-y-linter-javascript-d1ed1b5e5a88

Tambien, file-loader usado se encuentra de aqui:

[6] https://www.npmjs.com/package/file-loader

Editando:

|
 - images
     |
      - arranque.png
|
 - src
     |
     pages
       |
        - Inicio.js

Asi estan tus ficheros. Entonces la referencia desde Inicio.js sera como ../../images/arranque.png entonces el todito sera:

<img src={require('../../images/arranque.png')} />

Todavia:

Asi que entiendo, el proxy esta usado cuando conectas al servidor con el comando require. Entonces, tengas

<img src={require('/images/arranque.png')} />

y el proxy lo dirige al localhost:6000 en lado del localhost:3000 donde estas con client. Eso servidor:puerta combinacion puede ser cual quiera y todo funciona sin modificar el codigo entre dev y prod cuando usas diferente valor de proxy.

Puede ser que el proxy esta ahora tomando tu ../images/arranque.png como un destinacion a fuera al servidor y intentando de applicar el valor localhost:6000 a el por eso.

Yo sacare fuera el proxy y tomare un prueba otra vez. Recuerda el require() alrededor del direccion de imagen require('./images/arranque.png') o

const imagen = './images/arranque.png'  
<img src={require(`${imagen}`)} alt="producto" />

, si quieras que el nombre viene de base de datos o variable.

A ver, todavia:

Yo hacia un ejemplo en mi computadora para saber exactamente que sucede. Tenia que usar el tag asi para funcionar:

<img src={require('../images/arranque.png').default} />

sin el default palabra, venia solo un marco de [object Module] en dev tools y un imagen roto a la pantalla.

Mi ejemplo esta cargada al Github:

[7] https://github.com/micoFinlandes/reactjs-webpack/tree/master

17
  • Hablas de un fichero webpack.config.js, ¿Y donde está en mi proyecto? Porque estoy viendo que hay varios ficheros que se llaman asi. el 16 nov. 2020 a las 19:20
  • Eao cual es directamente abajo se client. Mira recurso [3].
    – mico
    el 16 nov. 2020 a las 19:39
  • Es extraño. He buscado en mi carpeta client y no hay ni rastro de ese fichero. el 16 nov. 2020 a las 20:12
  • Si no lo tienes, hay que crearlo. Puede ser que no lo uses el webpack todavia, por eso el configuracion tampoco. Por eso tenho el vinculo [5] paras Como utilizar webpack.
    – mico
    el 17 nov. 2020 a las 4:22
  • 1
    ¡Al fin! Fue solamente añadir lo de .default y ha funcionado. el 21 nov. 2020 a las 20:28

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.