Visual Studio Reaccionar la ruta de la imagen no puede llegar

Webpack es una herramienta inteligente. Uno de sus puntos fuertes es la eliminación de archivos / códigos basura del paquete.

Eso significa que si un archivo no se importa usando import myFile from '../myPath/myFile.jpg';o require ('../ myPath / myFile.jpg'); `no será parte del paquete final.

En su caso, no está importando el archivo. En su lugar, está creando una variable de cadena que no significa nada para el paquete web.

Hay diferentes opciones que podrían funcionar en su caso:

Opción 1: preimportar todas las imágenes y asignarlas en un objeto:

import React, {Component} from  'react';
import image1 from '../assets/image1.png';
import image2 from '../assets/image2.png';
import image3 from '../assets/image3.png';

const imageTypes = {
  image1,
  image2,
  image3,
}

export default class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      imageType: 'image1'
    }
  }

  render() {
    return (
      <img src={imageTypes[this.state.imageType]} />
    )
  }
}

Opción 2: No recomendado: use require para importar archivos dinámicamente (es posible que se necesiten configuraciones de paquete web para incluir todas las imágenes requeridas posibles en el paquete de producción):

class MyComponent {
  constructor(props) {
    super(props);
    this.state = {
      image: 'file1.png'
    }
  }

  render() {
    return (
      <img src={require(`./assets/${this.state.image}`)} />
    )
  }
}

Opción 3: envíe la imagen de blob (en base64) desde la API.

Le sugiero que utilice la Opción 1 o la Opción 3 , según sus requisitos, tales como: con qué frecuencia se cambiarán / agregarán / eliminarán las imágenes. No es normal importar archivos dinámicamente desde el paquete ReactJS y puede terminar teniendo una imagen inexistente en su proyecto solicitada por los datos que provienen de una fuente externa.

Para la Opción 2 , también puede tener algunos problemas al configurar el paquete web para incluir en el paquete todas las imágenes que probablemente necesitará renderizar, aunque no se hayan importado (codificado) en algún lugar de los archivos JS. Tenga en cuenta que la aplicación React en producción termina siendo una colección de archivos estáticos. Deberá tratarlos de la siguiente manera.