Как сделать require файла из папки public?

Question

[hannyto1111]

Здравствуйте, чтоб влять какой нибудь файл из src я могу использовать к примеру require(`./assets/items/${name}.png`);
Но как я могу использовать файл из папки public...

Comments

[Михаил]

за собсно чем?

[hannyto1111]

Просто чтоб можно было поставить картинки без перекомпиляции проекта

[Алексей Ярков]

Какое-то странное желание. Папка public существует для того, чтобы туда статику скидывать, которая не участвует в сборке. Просто кинуть туда картинки и использовать путь от корня public, типа /img/avatar.jpg.

[hannyto1111]

Алексей Ярков, Но если я использою require(`/img/${name}.png`); то получаю ошибку

This dependency was not found:

* /img in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&

To install it, you can run: npm install --save /items
Error from chokidar (/): Error: EBUSY: resource busy or locked, lstat 'C:\hiberfil.sys'

[Алексей Ярков]

hannyto1111, так может стоит открыть документацию уже хоть раз? При использовании файлов из public не нужен require.

Answer 1

[Aetae]

require не "берёт картинки из папки", require обрабатывает картинки loader'om и выдаёт в ответ результат. Статический результат, который попадает в бандл.
require(`./img/${name}.png`);- не значит "взять картинку по имени name из папки img во время исполнения", это значит "во время компиляции взять все картинки с маской './img/*.png', обработать loader'ом, получить для каждой статическую ссылку, и положить в бандл".
loader'ы по умолчанию превращают маленькие картинки в data:uri строки, а большие перекладывают в папочку imgs и переименовывают с хэшем, возвращая путь. Но это по-умолчанию, а так они способны много всякой магии творить.

Суть: новые картинки ты, которых не было во время сборки, таким образом не подцепишь.
Но это и не нужно, картинки лежащие в папке public копируются в результирующую папку как есть и доступны по /name.png без require, просто через обычный html и css.