Как правильно подгружать динамические изображения во Vue.js?

Question

[NVY977]

На данный момент я только начинаю изучать Vue.js. Не могу решить такую ​​проблему, при использовании "require()" появляется ошибка: "Module not found: Error: Can't resolve". Если я использую статическую загрузку, то все изображения загружаются нормально.

Статическая загрузка фотографий, которая работает:

<template>
    <img :src="'../img/' + message.filename" alt="img"/>
</template>

Динамическая загрузка фото, которая не работает:

<template>
    <img :src="require('../img/' + message.filename)" alt="img"/>
</template>

Также пытался:

"require('@/img/' + message.filename)" alt="img"/>
"require('@/assets/img/' + message.filename)" alt="img"/>

Структура папок:

/src
   /assets
      /img
         image_1.jpg
         image_2.jpg
   /resources
      /static
         /components
            App.vue
      main.js

Webpack.config.js

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  entry: path.join(__dirname, 'src', 'main', 'resources', 'static', 'js', 'main.js'),
  devServer: {
    contentBase: './static',
    compress: true,
    port: 8000,
    allowedHosts: [
      'localhost:8080'
    ],
    stats: 'errors-only',
    clientLogLevel: 'error',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.css$/,
        use: [
            'vue-style-loader',
            'css-loader'
             ]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ],
  resolve: {
      modules: [
          path.join(__dirname, 'src', 'main', 'resources', 'static', 'js'),
          path.join(__dirname, 'node_modules'),
      ],
      extensions: ['.js']
  }
}

Answer 1

[Aetae]

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"/>

Comments

[NVY977]

Стало намного понятнее, спасибо. Но до сих пор не совсем понимаю как динамически подгружать картинки.
Изображения отсутствуют на момент компиляции.
Изображения загружаются, но страница перезагружается при добавлении изображений. Соответственно не понятно как именно загрузить изображении без перезагрузки страницы.
Вот мой file-loader:

{
                test: /\.(png|jpg|jpeg|gif|svg)$/i,
                use: [
                    {

                        loader: 'file-loader',
                        options: {
                            name: `[name].[ext]`,
                            publicPath: '../img/',
                            outputPath: '../img/',
                        }
                    },
                ],
            },

На счет __webpack_public_path__. Как я понял из документации ( https://v4.webpack.js.org/api/module-variables/#__... ) Это и есть publicPath

[Aetae]

NVY977, file-loader как и все лоадеры опять же работает на этапе компиляции и на этапе исполнения(когда ты смотришь на сайт) давно уже отработал.

Что скрыто за "Изображения загружаются"?
Сервер принимает изображения от пользователя? Если да, то вот куда он(сервер) загруженные изображения кладёт, туда и src у img указывайте. Без всяких require и прочих танцев.
Что-то другое? Тогда что?

[NVY977]

Aetae, именно так и делаю. Пользователь загружает картинку, затем отправляет, сервер принимает кладет в папку ../img/, но для того чтобы увидеть картинку необходимо перезагрузить страницу. Путь у src указываю правильно (т.к. картинка загружается) , без require, просто

<img :src="'../img/' + message.filename" alt="img"/>

Но, опять же , чтобы увидеть картинку необходимо обновить страничку.

[Aetae]

NVY977, ээм, мб не показывать картинку пока она не загрузится на сервер?

<img v-if="isLoaded" :src="'../img/' + message.filename" alt="img"/>

или типа того?