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

Question

[tostershmoster]

const setPack = [
  {
    image: 'name-1.png',
    itemName: 'строка-1',
    quantity2: 'строка-2',
    quantity2: 'строка-3',
  },
  {
    image: 'name-2.png',
    itemName: 'строка-1',
    quantity1: 'строка-2',
    quantity2: 'строка-3',
  },
//...
}

{setPack.map((item) => (
  //...
  <img
    alt={item.itemName}
    src={`/assets/${item.image}`}
  />
  //...

После выполнения `npm run build` все картинки находятся в `/assets/image-name-hash.png` (с добавлением хеша) и не отображаются на странице. Хеш желательно оставить
Сборщик Vite.

// vite.config.ts

/* eslint-disable import/no-extraneous-dependencies */
import autoprefixer from 'autoprefixer';
import { defineConfig } from 'vite';

import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  css: {
    postcss: {
      plugins: [
        autoprefixer({}), // add options if needed
      ],
    },
  },
});

Comments

[Михаил Р.]

Ну а конфиг вита выйдет погулять?

[Mikhail Osher]

Демку на codesandbox можно?

[tostershmoster]

Михаил Р., обновил

Answer 1

[Aetae]

React - это тебе не Vue, он не умеет из коробки угадывать, что картинки надо импортировать.

Для каждой картинки надо сделать руками:
import img from './assets/img.jpeg'
или использовать glob import.

Ну либо положить картинки в public и брать их как есть по прямым путям относительно корня без всяких хэшей.

Подробнее.