Подтвердить что ты не робот

Реакция не будет загружать локальные изображения

Я создаю небольшое приложение для реагирования, и мои локальные изображения не будут загружаться. Такие изображения, как placehold.it/200x200, загружаются. Я подумал, может быть, это может быть что-то с сервером? Полный источник github.

Вот мой 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')
);

и 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');
});
4b9b3361

Ответ 1

При использовании Webpack вам require изображения для того, чтобы Webpack обрабатывал их, что объясняет, почему внешние изображения загружаются, а внутренние - нет, поэтому вместо <img src={"/images/resto.png"}/> вам нужно используйте <img src={require('/images/image-name.png')}/> заменяя image-name.png правильным именем изображения для каждого из них. Таким образом, Webpack способен обрабатывать и заменять исходный img.

Ответ 2

Другой способ:

Сначала установите эти модули: url-loader, file-loader

Использование npm: npm install --save-dev url-loader file-loader

Затем добавьте это в свою конфигурацию Webpack:

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

limit: limit байтов для встроенных файлов как URL-адрес данных

Вам необходимо установить оба модуля: url-loader и file-loader

Наконец, вы можете сделать:

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

Здесь вы можете исследовать эти погрузчики:

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

файл-загрузчик: https://www.npmjs.com/package/file-loader

Ответ 3

Я начал создавать свое приложение с помощью приложения create-react-app (см. Вкладку "Создать новое приложение"). README.md, который поставляется с ним, дает следующий пример:

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;

Это отлично сработало для меня. Здесь ссылка на главный документ для этого README, в котором объясняется (выдержка):

... Вы можете импортировать файл прямо в модуль JavaScript. Это указывает Webpack включить этот файл в комплект. В отличие от импорта CSS импорт файла дает строковое значение. Это значение является конечным путем, которым вы можете ссылаться в коде, например, как атрибут src изображения или href ссылки на PDF.

Чтобы уменьшить количество запросов на сервер, импорт изображений, размер которых меньше 10 000 байт, возвращает URI данных вместо пути. Это относится к следующим расширениям файлов: bmp, gif, jpg, jpeg и png...

Ответ 4

На самом деле я хотел бы прокомментировать, но я еще не авторизовался. Вот почему они притворяются очередным ответом, пока это не так.

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" />;

Я хотел бы продолжить этот путь. Это работает плавно, когда у вас есть изображение, можно просто вставить. В моем случае это немного сложнее: мне нужно отобразить несколько снимков. Пока что единственный доступный способ сделать это, я нашел следующее

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]}/> 

Итак, мой вопрос заключается в том, существуют ли более простые способы обработки этих изображений? Излишне говорить, что в более общем случае количество файлов, которые должны быть буквально импортированы, может быть огромным и количество ключей в объекте. (Объект в этом коде явно связан с именами клавиш -its). В моем случае процедуры, связанные с требованиями, не работали - загрузчики генерировали ошибки странного типа во время установки и не отображали никаких признаков работы; и само требование не сработало.

Ответ 5

Я тоже хотел бы добавить к ответам @Hawkeye Parker и @Kiszuriwalilibori:

Как было отмечено в документах здесь, обычно лучше импортировать изображения по мере необходимости.

Тем не менее, мне потребовалось много файлов для динамической загрузки, что привело меня к размещению изображений в общей папке (также указано в README) из-за этой рекомендации ниже из документации:

Обычно мы рекомендуем импортировать стили, изображения и шрифты из JavaScript. Общая папка полезна в качестве обходного пути для ряда менее распространенных случаев:

  • Вам нужен файл с определенным именем в выводе сборки, например manifest.webmanifest.
  • У вас есть тысячи изображений и вам необходимо динамически ссылаться на их пути.
  • Вы хотите включить небольшой скрипт, такой как pace.js, за пределы связанного кода.
  • Некоторая библиотека может быть несовместимой с Webpack, и у вас нет другого выбора, кроме как включить ее в качестве тега.

Надеюсь, это поможет кому-то еще! Оставьте мне комментарий, если мне нужно снять все это.

Ответ 6

Это скорее комментарий, а не ответ, но у меня недостаточно репутации. Это о "требовать" решения. Он работает в среде, как описано, но это способ заставить требовать в прикрепленном файле CSS???

 #root {

  background-image: url(../images/books.jpg);
  background-size: cover;
  background-position: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;

}

Ответ 7

Попробуйте изменить код на server.js на -

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

Ответ 8

Иногда вы можете вводить вместо своего местоположения изображения /src: try

./assets/images/picture.jpg

вместо

../assets/images/picture.jpg

Ответ 9

Я просто хотел оставить следующее, что улучшает принятый ответ выше.

В дополнение к принятому ответу, вы можете сделать свою собственную жизнь немного легче, указав путь к alias в Webpack, так что вам не нужно беспокоиться о том, где находится изображение относительно файла, который вы сейчас находитесь. ниже:

Файл Webpack:

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

Использование:

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

Ответ 10

Это старый вопрос, но я хотел бы добавить свой. Я использовал это не лучше, чем первый импорт. Что делать, если вы рендеринг 100 изображений?

Ответ 11

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

Использование атрибута src таким образом означает, что ваше изображение будет загружено с абсолютного пути "/images/resto.png" для вашего сайта. Каталог изображений должен находиться в корне вашего сайта. Пример: http://www.example.com/images/resto.png

Ответ 12

Если вы создали свое приложение с помощью create-реагировать на приложение. Вам просто нужно поместить ваши изображения в /public папку. И укажите путь относительно общей папки.

Скажем, у вас есть изображение my-image.png в вашей my-image.png папке, вы можете сделать это.

<img src='my-image.png'/>

Независимо от того, где вы положили эту строку кода HTML. React будет знать, что ему нужно получить изображение из публичного каталога.

Очень просто ; )

Ответ 13

Самым эффективным решением, с которым я столкнулся, было установка изображения с помощью CSS.

.profile_img {
   background-image: url('https://img.icons8.com/contacts.png');
}

Вы можете предоставить вашему jsx похожее имя класса

 <Icon className="profile_img" />

В объявлении компонента вы можете просто сделать это

const Icon = () => {
   return(
     <img src='' alt='profileicon'/>
   )
}

Ответ 14

Что сработало для меня было вставить путь между backticks и ${}. Так, например, вместо:

<img src={require("../images/resto.png")} />

использование:

<img src={require(`${../images/resto.png}`} />

Таким образом, когда код скомпилирован, вставлен правильный путь.