Estoy creando una pequeña aplicación de reacción y mis imágenes locales no se cargan. Imágenes comoplacehold.it/200x200
cargas. Pensé que tal vez podría ser algo con el servidor.
Aquí está mi App.js
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div className="home-container">
<div className="home-content">
<div className="home-text">
<h1>foo</h1>
</div>
<div className="home-arrow">
<p className="arrow-text">
Vzdělání
</p>
<img src={"/images/resto.png"} />
</div>
</div>
</div>
);
}
}
export default App;
index.js:
import React, { Component } from 'react';
import { render } from 'react-dom';
import { Router, Route, Link } from 'react-router';
import { createHistory } from 'history';
import App from './components/app';
let history = createHistory();
render(
<Router history={history} >
<Route path="/" component={App} >
<Route path="vzdelani" component="" />
<Route path="znalosti" component="" />
<Route path="prace" component="" />
<Route path="kontakt" component="" />
</Route>
<Route path="*" component="" />
</Router>,
document.getElementById('app')
);
y server.js:
var path = require('path');
var express = require('express');
var webpack = require('webpack');
var config = require('./webpack.config.dev');
var app = express();
var compiler = webpack(config);
app.use(require('webpack-dev-middleware')(compiler, {
noInfo: true,
publicPath: config.output.publicPath
}));
app.use(require('webpack-hot-middleware')(compiler));
app.get('*', function(req, res) {
res.sendFile(path.join(__dirname, 'index.html'));
});
app.listen(3000, 'localhost', function(err) {
if (err) {
console.log(err);
return;
}
console.log('Listening at http://localhost:3000');
});
javascript
reactjs
Petrba
fuente
fuente
require()
. por ejemplo, src = {require ("ruta de la imagen")}Respuestas:
Al usar Webpack, necesita
require
imágenes para que Webpack las procese, lo que explicaría por qué las imágenes externas se cargan mientras que las internas no, por lo que en lugar de hacerlo<img src={"/images/resto.png"} />
, debe<img src={require('/images/image-name.png')} />
reemplazar image-name.png con el nombre de imagen correcto para cada una de ellas. De esa manera, Webpack puede procesar y reemplazar la fuente img.fuente
import {require} from 'browserify'
. Pero no funciona.require
. Se proporciona como parte decommonjs
. Consulte stackoverflow.com/a/33251937/4103908 y viget.com/articles/gulp-browserify-starter-faq para obtener más detalles que podrían ayudarlo a usar require y browserify usando Gulp.Module not found: Error: Can't resolve 'MyPNG.png' in 'C:...\app\components\images'
. ¡La ruta al archivo se ve bien !.Empecé a crear mi aplicación con create-react-app (consulte la pestaña "Crear una nueva aplicación"). El README.md que viene con él da este ejemplo:
Esto funcionó perfectamente para mí. Aquí hay un enlace al documento maestro para ese README , que explica (extracto):
fuente
Unexpected character '�' (1:0) > 1 | �PNG | ^ 2 | 3 | 4 | IHDR��r~ipHYs���o�d��IDATx^�}���Ü�d7�w¿½ï¿½ ��JzH!�K�ï
...Otra forma de hacerlo:
Primero, instale estos módulos:
url-loader
,file-loader
Usando npm:
npm install --save-dev url-loader file-loader
A continuación, agregue esto a su configuración de Webpack:
limit
: Límite de bytes para archivos en línea como URL de datosNecesita instalar ambos módulos:
url-loader
yfile-loader
Finalmente, puedes hacer:
Puede investigar estos cargadores más a fondo aquí:
cargador de URL: https://www.npmjs.com/package/url-loader
cargador de archivos: https://www.npmjs.com/package/file-loader
fuente
npm install --save-dev url-loader
Module build failed: SyntaxError: c:/contrivedpath/images/profile.jpg: Unexpected character '�' (1:0)
, todo lo que necesita hacer es agregar esta configuración del cargador de url anterior a la configuración de su paquete web, npm installurl-loader
Yfile-loader
lo hará ser funcional. Probé para asegurarme, y el cargador de archivos es necesario.ERROR in ./src/images/imagename.png Module parse failed: Unexpected character '�' (1:0)
mensaje. ¿Algunas ideas?src=[Object module]
y cuando coloco el mouse sobre el mouse dice 'no se pudo cargar la imagen'En realidad me gustaría comentar, pero aún no estoy autorizado. Es por eso que pretende ser la próxima respuesta mientras no lo es.
Me gustaría seguir ese camino. Eso funciona sin problemas cuando se tiene una imagen que se puede insertar fácilmente. En mi caso eso es un poco más complejo: tengo que mapear varias imágenes. Hasta ahora, la única forma viable de hacer esto que encontré es la siguiente
Entonces, mi pregunta es si hay formas más simples de procesar estas imágenes. No hace falta decir que, en un caso más general, la cantidad de archivos que deben importarse literalmente podría ser enorme y la cantidad de claves en el objeto también. (El objeto en ese código está involucrado claramente para referirse por nombres, sus claves) En mi caso, los procedimientos relacionados con los requisitos no han funcionado: los cargadores generaron errores de tipo extraño durante la instalación y no mostraron ninguna marca de funcionamiento; y requerir por sí solo no ha funcionado tampoco.
fuente
Solo quería dejar lo siguiente que mejora la respuesta aceptada anterior.
Además de la respuesta aceptada, puede hacer su propia vida un poco más fácil especificando un
alias
ruta en Webpack, para que no tenga que preocuparse de dónde se encuentra la imagen en relación con el archivo en el que se encuentra actualmente. Consulte el ejemplo a continuación :Archivo webpack:
Utilizar:
fuente
A mí también me gustaría agregar a las respuestas de @Hawkeye Parker y @Kiszuriwalilibori:
Como se señaló en los documentos aquí , generalmente es mejor importar las imágenes según sea necesario.
Sin embargo, necesitaba que se cargaran dinámicamente muchos archivos, lo que me llevó a poner las imágenes en la carpeta pública ( también se indica en el README ), debido a esta recomendación a continuación de la documentación:
¡Espero que ayude a alguien más! Déjame un comentario si necesito aclarar algo de eso.
fuente
Estoy desarrollando un proyecto que usa SSR y ahora quiero compartir mi solución basada en algunas respuestas aquí.
Mi objetivo es precargar una imagen para mostrarla cuando la conexión a Internet está desconectada. (Puede que no sea la mejor práctica, pero como funciona para mí, está bien por ahora) FYI, también uso ReactHooks en este proyecto.
Para usar la imagen, la escribo así
fuente
Intente cambiar el código en server.js a -
fuente
A veces puede ingresar en lugar de en la ubicación de su imagen / src: intente
en vez de
fuente
El uso del atributo src de esta manera significa que su imagen se cargará desde la ruta absoluta "/images/resto.png" para su sitio. El directorio de imágenes debe estar ubicado en la raíz de su sitio. Ejemplo: http://www.example.com/images/resto.png
fuente
Esto es lo que funcionó para mí. Primero, entendamos el problema. No puede usar una variable como argumento para requerir. Webpack necesita saber qué archivos empaquetar en tiempo de compilación.
Cuando recibí el error, pensé que podría estar relacionado con el problema de la ruta como en absoluto frente a relativo. Así que pasé un valor codificado para requerir como a continuación: <img src = {require ("../ assets / images / photosnap.svg")} alt = "" />. Estaba funcionando bien. Pero en mi caso el valor es una variable proveniente de props. Intenté pasar una variable literal de cadena como sugirieron algunos. No funcionó. También traté de definir un método local usando el caso de cambio para los 10 valores (sabía que no era la mejor solución, pero solo quería que funcionara de alguna manera). Eso tampoco funcionó. Luego me di cuenta de que NO podemos pasar la variable al requisito.
Como solución temporal, modifiqué los datos en el archivo data.json para limitarlo solo al nombre de mi imagen. Este nombre de imagen que proviene de los accesorios como un literal de cadena. Lo concatené al valor codificado de forma rígida, así:
El valor real contenido en el logotipo vendría del archivo data.json y se referiría a algún nombre de imagen como photosnap.svg.
fuente
La mejor forma de cargar imágenes locales en react es la siguiente
Por ejemplo, mantenga todas sus imágenes (o cualquier activo como videos, fuentes) en la carpeta pública como se muestra a continuación.
Simplemente escriba
<img src='/assets/images/Call.svg' />
para acceder a la imagen Call.svg desde cualquiera de sus componentes de reacciónNota: Mantener sus activos en la carpeta pública garantiza que pueda acceder a ellos desde cualquier lugar del proyecto, simplemente dando '/ path_to_image' y sin necesidad de ningún recorrido de ruta '../../' como este
fuente
primero debe importar la imagen y luego usarla. Funcionó para mí.
fuente