React não carrega imagens locais

Estou construindo um pequeno aplicativo de reação e minhas imagens locais não carregam. Imagens como placehold.it/200x200cargas. Eu pensei que talvez pudesse ser algo com o servidor?

Aqui está meu 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')
);

e 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');
});

Ao usar o Webpack, você precisa das requireimagens para que o Webpack as processe, o que explicaria por que as imagens externas carregam enquanto as internas não, então, em vez de <img src={"/images/resto.png"} />usar a <img src={require('/images/image-name.png')} />substituição de image-name.png pelo nome de imagem correto para cada uma delas. Dessa forma, o Webpack é capaz de processar e substituir o img de origem.

Comecei a construir meu aplicativo com create-react-app (consulte a guia "Criar um novo aplicativo"). O README.md que o acompanha dá este exemplo:

import React from 'react';
import logo from './logo.png'; // Tell Webpack this JS file uses this image

console.log(logo); // /logo.84287d09.png

function Header() {
  // Import result is the URL of your image
  return <img src={logo} alt="Logo" />;
}

export default Header;

Isso funcionou perfeitamente para mim. Aqui está um link para o documento mestre desse README , que explica (trecho):

... Você pode importar um arquivo diretamente em um módulo JavaScript. Isso informa ao Webpack para incluir esse arquivo no pacote. Ao contrário das importações CSS, importar um arquivo fornece um valor de string. Este valor é o caminho final que você pode fazer referência em seu código, por exemplo, como o atributo src de uma imagem ou o href de um link para um PDF.

Para reduzir o número de solicitações ao servidor, a importação de imagens com menos de 10.000 bytes retorna um URI de dados em vez de um caminho. Isso se aplica às seguintes extensões de arquivo: bmp, gif, jpg, jpeg e png ...

Outra maneira de fazer:

Em primeiro lugar, instalar esses módulos: url-loader,file-loader

Usando npm: npm install --save-dev url-loader file-loader

Em seguida, adicione à sua configuração do Webpack:

module: {
    loaders: [
      { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }
    ]
  }

limit: Limite de bytes para arquivos embutidos como URL de dados

Você precisa instalar os dois módulos: url-loaderefile-loader

Finalmente, você pode fazer:

<img src={require('./my-path/images/my-image.png')}/>

Você pode investigar esses carregadores mais aqui:

url-loader: https://www.npmjs.com/package/url-loader

file-loader: https://www.npmjs.com/package/file-loader

Na verdade gostaria de comentar, mas ainda não estou autorizado. É por isso que fingir ser a próxima resposta enquanto não é.

import React from 'react';
import logo from './logo.png'; // Tell Webpack this JS file uses this image
console.log(logo); // /logo.84287d09.png

function Header() {
// Import result is the URL of your image
  return <img src={logo} alt="Logo" />;

Eu gostaria de continuar nesse caminho. Isso funciona bem quando se tem uma imagem que pode ser inserida com facilidade. No meu caso isso é um pouco mais complexo: tenho que mapear várias fotos. Até agora, a única maneira viável de fazer isso que encontrei é a seguinte

import upperBody from './upperBody.png';
import lowerBody from './lowerBody.png';
import aesthetics from './aesthetics.png';

let obj={upperBody:upperBody, lowerBody:lowerBody, aesthetics:aesthetics, agility:agility, endurance:endurance}

{Object.keys(skills).map((skill) => {
 return ( <img className = 'icon-size' src={obj[skill]}/> 

Então, minha pergunta é se existem maneiras mais simples de processar essas imagens? Nem é preciso dizer que, em casos mais gerais, o número de arquivos que devem ser importados literalmente pode ser enorme e o número de chaves no objeto também. (O objeto nesse código está envolvido claramente para se referir por nomes - suas chaves) No meu caso, os procedimentos relacionados à solicitação não funcionaram - os carregadores geraram erros de tipo estranho durante a instalação e não mostraram nenhuma marca de funcionamento; e exigir por si só não funcionou.

Eu só queria deixar o seguinte, o que reforça a resposta aceita acima.

Além da resposta aceita, você pode tornar sua vida um pouco mais fácil especificando um aliascaminho no Webpack, para que não precise se preocupar onde a imagem está localizada em relação ao arquivo em que você está no momento. Veja o exemplo abaixo :

Arquivo Webpack:

module.exports = {
  resolve: {
    modules: ['node_modules'],
    alias: {
      public: path.join(__dirname, './public')
    }
  },
}

Usar:

<img src={require("public/img/resto.ong")} />

Eu também gostaria de acrescentar às respostas de @Hawkeye Parker e @Kiszuriwalilibori:

Como foi observado nos documentos aqui , normalmente é melhor importar as imagens conforme necessário.

Porém, muitos arquivos precisavam ser carregados dinamicamente, o que me levou a colocar as imagens na pasta pública ( também declarado no README ), devido a esta recomendação abaixo da documentação:

Normalmente, recomendamos importar folhas de estilo, imagens e fontes do JavaScript. A pasta pública é útil como solução alternativa para alguns casos menos comuns:

• Você precisa de um arquivo com um nome específico na saída da compilação, como manifest.webmanifest.
• Você tem milhares de imagens e precisa referenciar dinamicamente seus caminhos.
• Você deseja incluir um pequeno script como pace.js fora do código empacotado.
• Algumas bibliotecas podem ser incompatíveis com o Webpack e você não tem outra opção a não ser incluí-las como uma tag.

Espero que ajude mais alguém! Deixe-me um comentário se eu precisar esclarecer qualquer coisa.

Estou desenvolvendo um projeto que utiliza SSR e agora quero compartilhar minha solução com base em algumas respostas aqui.

Meu objetivo é pré-carregar uma imagem para mostrá-la quando a conexão com a Internet estiver offline. (Pode não ser a melhor prática, mas como funciona para mim, por enquanto está tudo bem) Para sua informação, também uso ReactHooks neste projeto.

  useEffect(() => {
    // preload image for offline network
    const ErrorFailedImg = require('../../../../assets/images/error-review-failed.jpg');
    if (typeof window !== 'undefined') {
      new Image().src = ErrorFailedImg;
    }
  }, []);

Para usar a imagem, eu escrevo assim

<img src="/assets/images/error-review-failed.jpg" />

Tente alterar o código em server.js para -

app.use(require('webpack-dev-middleware')(compiler, {
      noInfo: true,
      publicPath: config.output.path
    }));

Às vezes, você pode inserir em vez de em sua localização de imagem / src: try

./assets/images/picture.jpg

ao invés de

../assets/images/picture.jpg

src={"/images/resto.png"}

Usar o atributo src desta forma significa que sua imagem será carregada do caminho absoluto "/images/resto.png" para seu site. O diretório de imagens deve estar localizado na raiz do seu site. Exemplo: http://www.example.com/images/resto.png

Aqui está o que funcionou para mim. Primeiro, vamos entender o problema. Você não pode usar uma variável como argumento para requerer. O Webpack precisa saber quais arquivos empacotar no momento da compilação.

Quando recebi o erro, pensei que poderia estar relacionado ao problema do caminho como em absoluto vs relativo. Então, passei um valor embutido em código para exigir como abaixo: <img src = {require ("../ assets / images / photosnap.svg")} alt = "" />. Estava funcionando bem. Mas, no meu caso, o valor é uma variável vinda dos adereços. Tentei passar uma variável literal de string como alguns sugeriram. Não funcionou. Também tentei definir um método local usando switch case para todos os 10 valores (eu sabia que não era a melhor solução, mas queria que funcionasse de alguma forma). Isso também não funcionou. Então descobri que NÃO podemos passar variáveis ​​para o require.

Como solução alternativa, modifiquei os dados no arquivo data.json para restringi-los apenas ao nome da minha imagem. Este nome de imagem que vem dos adereços como um literal de string. Eu concatenei-o com o valor codificado, assim:

import React from "react";

function JobCard(props) {  

  const { logo } = props;
  
  return (
      <div className="jobCards">
          <img src={require(`../assets/images/${logo}`)} alt="" /> 
      </div>
    )
} 
  

O valor real contido no logotipo viria do arquivo data.json e se referiria a algum nome de imagem como photosnap.svg.

A melhor maneira de carregar imagens locais no react é a seguinte

Por exemplo, mantenha todas as suas imagens (ou quaisquer recursos como vídeos, fontes) na pasta pública conforme mostrado abaixo.

Basta escrever <img src='/assets/images/Call.svg' />para acessar a imagem Call.svg de qualquer um de seus componentes react

Observação: manter seus ativos na pasta pública garante que você possa acessá-los de qualquer lugar do projeto, apenas fornecendo '/ path_to_image' e sem a necessidade de qualquer percurso de caminho '../../' como este

você deve importar a imagem primeiro e depois usá-la. Funcionou para mim

import image from '../image.png'

const Header = () => {
   return (
     <img src={image} alt='image' />
   )
}