Рендеринг изображений в React с поврежденным веб-пакетом - PullRequest
Новая
       3

Рендеринг изображений в React с поврежденным веб-пакетом

0 голосов
/ 22 января 2019

Я пытаюсь отобразить изображение в моем React Web App, но изображение повреждено.Однако, когда я делаю console.log пути к файлу, я вижу следующее, что кажется правильным.Мы используем url-загрузчик и загрузчик файлов с веб-пакетом и импортируем путь к файлу непосредственно в операторах импорта по мере необходимости.Я попытался добавить требуемый ('imageFilePath.png'), но это тоже не сработало.

В настоящее время изображение помещается непосредственно в папку src вместе с App.js.

Здесьмой App.js: 

import React, { Component } from 'react'
import './App.css'
import {Tweet} from 'react-twitter-widgets';
import logoFinal from './logoFinal.png';

class App extends Component {
render () {
    const { error, isLoaded} = this.state;
    if (error){
      return <div> Error: {error.message}</div>
    } else if (!isLoaded){
      return <div>Loading...</div>
    } else{
    return (

     <div className="container">
        <nav className="navbar navbar-expand-lg navbar-light fixed-top">
        <div className="container">
          <a className="navbar-brand pull-left" href="/home">
          <div>
          <img src={require('./logoFinal.png')} width='100' margintop='-7' /></div></a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span className="navbar-toggler-icon"></span>
          </button>
          <div className="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div className="navbar-nav">
              <a className="nav-item nav-link active" href="#">Home <span className="sr-only">(current)</span></a>
              <a className="nav-item nav-link" href="#">By State</a>
            </div>
          </div>
          </div>
        </nav>

А затем в моем webpack.config.js в разделе модуля у меня есть следующее: 

{
  test: /\.(png|jp(e*)g|svg)$/,  
  use: [{
    loader: 'url-loader',
    options: { 
      limit: 8000, // Convert images < 8kb to base64 strings
      name: 'images/[hash]-[name].[ext]'
    } 
  }]
},
{
  // "oneOf" will traverse all following loaders until one will
  // match the requirements. When no loader matches it will fall
  // back to the "file" loader at the end of the loader list.
  oneOf: [
    // "url" loader works like "file" loader except that it embeds assets
    // smaller than specified limit in bytes as data URLs to avoid requests.
    // A missing `test` is equivalent to a match.
    {
      test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
      loader: require.resolve('url-loader'),
      options: {
        limit: 10000,
        name: 'static/media/[name].[hash:8].[ext]',
      },
    },

Ответы [ 2 ]

0 голосов
/ 22 января 2019

Я работаю с Натали.Я удалил лишний url-загрузчик из веб-пакета и сохранил второй.Я попробовал предложения, и изображение по-прежнему отображается как сломанный.Я вижу img в html как это: http://localhost:3000static/media/logoFinal.fb830421.png

Я также пытался использовать загрузчик файлов.

0 голосов
/ 22 января 2019

Добро пожаловать в StackOverflow!

С этой строкой вы импортировали изображение. 

import logoFinal from './logoFinal.png';

Переменная logoFinal будет фактическим путем к изображению, который будет сгенерированWebPack.Поэтому вы можете использовать его в теге <img /> в качестве атрибута src. 

<img src={logoFinal} />

You webpack config выглядит странно, поскольку вы определили два правила для изображений.Более поздний с require.resolve('url-loader') швами будет правильным.

...