require
работает на этапе компиляции. Т.е. во время исполнения он
уже должен был собрать все вызовы
require
и положить их в
.js
файл.
require
не может быть динамичным, потому что на этапе исполнения его тупо уже нет - он заменён на то, что он возвращает.
Для решения подобных задач два варианта:
1.
require.context - который соберёт
все файлы по предоставленному шаблону на этапе компиляции, и на этапе исполнения будет их подставлять. Этот вариант подходит если в папке
img
уже сейчас лежат все нужные изображения.
2. Если изображения на этапе компиляции отсутствуют, а появляются каким-то сторонним образом в паке потом, то
require
тебе тут не нужен(и не поможет), просто динамически подставляй пути к ним как в твоём первом варианте.
Путь от корня, если что, можно получить из
__webpack_public_path__
:
root: __webpack_public_path__,
<img :src="root + 'img/' + message.filename" :alt="message.filename"/>