Реакція не завантажує локальні зображення

Я будую невеликий додаток для реагування, і мої локальні зображення не завантажуватимуться. Зображення, якplacehold.it/200x200 навантаження. Я думав, може, це може бути щось із сервером?

Ось мій 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');
});

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

Я почав будувати свій додаток із 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 ...

Ще один спосіб зробити:

Спочатку встановіть ці модулі: 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: Обмеження байтів для вбудованих файлів у вигляді URL-адреси даних

Вам потрібно встановити обидва модулі:url-loader іfile-loader

Нарешті, ви можете зробити:

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

Ви можете дослідити ці навантажувачі далі тут:

URL-завантажувач: https://www.npmjs.com/package/url-loader

завантажувач файлів: https://www.npmjs.com/package/file-loader

Насправді я хотів би прокоментувати, але я ще не маєте повноважень. Ось чому ця претензія є наступною відповіддю, поки її немає.

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

Отже, моє запитання: чи існують більш прості способи обробки цих зображень? Зайве говорити, що в більш загальному випадку кількість файлів, які повинні бути буквально імпортовані, може бути величезною, а також кількість ключів в об'єкті. (Об'єкт у цьому коді чітко посилається на імена -ідентифікаційні клавіші) У моєму випадку процедури, пов’язані з вимогами, не спрацювали - завантажувачі створювали помилки дивного типу під час встановлення і не показали жодної позначки роботи; і вимагати само по собі не працювало ні.

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

На додаток до прийнятої відповіді, ви можете трохи полегшити своє власне життя, вказавши aliasшлях у Webpack, тому вам не доведеться хвилюватися, де розташоване зображення відносно файлу, в якому ви перебуваєте. Перегляньте приклад нижче :

Файл веб-упаковки:

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

Використання:

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

Я теж хотів би додати відповіді від @Hawkeye Parker та @Kiszuriwalilibori:

Як було відзначено , з документації тут , як правило, найкраще імпортувати зображення за потребою.

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

Зазвичай ми рекомендуємо імпортувати таблиці стилів, зображення та шрифти з JavaScript. Загальнодоступна папка корисна як вирішення для ряду менш поширених випадків:

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

Сподіваюсь, що допоможе хтось інший! Залиште мені коментар, якщо мені потрібно очистити щось із цього.

Я розробляю проект, який використовує SSR, і тепер я хочу поділитися своїм рішенням на основі деяких відповідей тут.

Мої цілі - це попередньо завантажити зображення, щоб показати його, коли Інтернет-з'єднання в режимі офлайн. (Це може бути не найкраща практика, але оскільки це працює для мене, це нормально на даний момент) FYI, я також використовую ReactHooks в цьому проекті.

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

Щоб використовувати зображення, я записую його так

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

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

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

Іноді ви можете ввести замість свого зображення / src: спробуйте

./assets/images/picture.jpg

замість

../assets/images/picture.jpg

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

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

Ось що для мене спрацювало. По-перше, розберемося з проблемою. Ви не можете використовувати змінну як аргумент для вимагання. Вебпак повинен знати, які файли потрібно поєднати під час компіляції.

Коли я отримав помилку, я подумав, що це може бути пов'язано з проблемою шляху, як і в абсолютній відносності. Тому я передав важко кодоване значення, щоб вимагати, як показано нижче: <img src = {вимагати ("../ активи / образи / photosnap.svg")} alt = "" />. Це добре працювало. Але в моєму випадку значення є змінною, що надходить від реквізиту. Я намагався передати строкову літеральну змінну, як деякі пропонували. Це не спрацювало. Також я спробував визначити локальний метод за допомогою корпусу комутатора для всіх 10 значень (я знав, що це не найкраще рішення, але я просто хотів, щоб він якось працював). Це теж не вийшло. Тоді я дізнався, що ми НЕ можемо передати змінну до вимоги.

В якості вирішення я змінив дані у файлі data.json, щоб обмежити його лише іменем мого зображення. Це ім'я зображення, яке походить від реквізиту як літеральний рядок. Я з'єднав це з жорстко кодованим значенням, наприклад:

import React from "react";

function JobCard(props) {  

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

Фактичне значення, що міститься в логотипі, буде надходити з файлу data.json і посилатиметься на якесь ім'я зображення, наприклад photosnap.svg.

Найкращий спосіб завантажувати локальні зображення в такий спосіб

Наприклад, зберігайте всі свої зображення (або будь-які об’єкти, такі як відео, шрифти) у загальнодоступній папці, як показано нижче.

Просто напишіть, <img src='/assets/images/Call.svg' />щоб отримати доступ до зображення Call.svg з будь-якого Вашого компонента реакції

Примітка. Зберігання активів у загальнодоступній папці гарантує, що ви можете отримати доступ до нього з будь-якої точки проекту, просто надавши "/ path_to_image" і не потребуючи жодного проходження шляху "../../", як це

спочатку потрібно імпортувати зображення, а потім використовувати його. Це працювало для мене.

import image from '../image.png'

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