Почему не подключаются нужные изображения?

Question

[jslby]

Имеется примерно следующая структура:
Есть отдельный компонент с выводом комментариев в который передается дерево комментариев:

const listReviews = [
  {
    img: require('./img/r1.jpg'),
    publish: '30 июл в 10:04',
    author: 'Кирилл Фадеев',
    message: 'Все хорошо'
  },
  {
    img: require('./img/r2.jpg'),
    publish: '30 июл в 10:04',
    author: 'Ilay Evil',
    message: 'Все отлично'
  },
];

<Reviews list={listReviews}/>

Компоненты находятся в двух разных папках. Почему webpack пытается загрузить изображения из папки компонента Reviews, а не из папки текущего компонента?

Comments

[Петр Мухуров]

import r1 from "./img/r1.jpg";
import r2 from "./img/r2.jpg";

const listReviews = [
  {img: r1, ...},
  {img: r2, ...}
];

[Антон Спирин]

А что у вас в webpack.config.js?

[jslby]

Антон Спирин,

entry: {
    'build': path.join(__dirname, '/src/index.js'),
  },
  output: {
    filename: 'build.js',
    publicPath: '/',
    path: path.join(__dirname, '/dist')
  },
  module: {
    rules: [{
      test: /\.js$/,
      include: [
        path.resolve(__dirname, "src"),
        path.resolve(__dirname, "node_modules/chatjs"),
      ],
      use: {
        loader: 'babel-loader'
      }
      
    },
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    },
    {
      test: /\.(jpg|png|gif|mp4|mp3|svg)$/,
      use: {
        loader: "url-loader",
        options: {
          limit: 1,
          name: '[name].[ext]',
        },
      },
    },
    ]
  },

[jslby]

jslby, нашел проблему. на другой странице тоже подключался компонент с отзывами, и там были другие отзывы, но изображения назывались точно так же, сменил имена и все ок)

Answer 1

[Антон Спирин]

{
  test: /\.(jpg|png|gif|ico|svg)$/,
  use: [{
    loader: 'file-loader',
    options: {
      name: 'images/[name]-[hash:base64:5].[ext]'
    }
  }]
},