Как загрузить локальные изображения в React - PullRequest
Новая
       103

Как загрузить локальные изображения в React

0 голосов
/ 29 января 2020

Я искал это для часов и не могу найти решение, которое работает.

Я пытаюсь добавить локальный элемент uri к элементу img, но не может решить это. 

import React from 'react'
import image from '../assets/udemy2.PNG'
const WorkingSpinner = () => (
<div>
  <img height="50px" width="50px" src={image}/>
</div>
)

export default WorkingSpinner

Я пытаюсь использовать file-loader с webpack, и моя конфигурация выглядит следующим образом: 

  module: {
    rules: [{
      loader: 'babel-loader',
      test: /\.js$/,
      exclude: /node_modules/
    }, {
    loader: 'file-loader',
    test: /\.(png|jpe?g|gif)$/i,
    options: {
      name: '[name].[ext]',
      outputPath: "images"
    }
    }, {
    loader: 'url-loader?limit=8192',
    test: /\.(png|jpe?g|gif)$/i,

    }]

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

Ответы [ 2 ]

1 голос
/ 29 января 2020

Хорошо, похоже, решение было проще, чем добавление загрузчиков и плагинов. Оказывается, я мог бы просто поместить свои изображения в папку в моем каталоге publi c, куда выводится thebundle, и использовать абсолютный путь к тому изображению, которое я хочу использовать.

так image сработало.

Моя структура каталогов выглядит следующим образом:

enter image description here

Надеюсь, это кому-нибудь поможет еще с похожими проблемами.

0 голосов
/ 29 января 2020

Я не уверен, что это лучший способ, но в моем приложении я использую copy-webpack-plugin для этого (https://github.com/webpack-contrib/copy-webpack-plugin): 

 plugins: [
    ... someOtherPlugins,
    new CopyWebpackPlugin([{from: 'images/*.*'}])
]

А потом из компонента React я звоню

<img height="50px" width="50px" src={'/images/image.jpeg'}/>

...