Vue, TypeScript, многофайловый компонент, изображение не обрабатывается

Question

Я реализовал настройку многофайлового компонента:

src/components/ui/navbar/
    Navbar.component.ts
    navbar.html
    navbar.scss

С помощью navbar.html я использовал <img />, который получал base64 до того момента, когда я его экстернализовал вмногофайловый компонент.

<div class="navbar-header">
    <router-link tag="a" to="/home" class="navbar-brand" href="#" title="CompanyName">
        <img class="img-fluid" src="./assets/logo.png" alt="CompanyName">
    </router-link>
</div>

Я заглянул в папку dist/ и не вижу logo.png.Я просмотрел окончательный вывод, и изображение больше не было base64'd или скопировано.

Я подозреваю, что в vue.config.js что-то нужно, чтобы сообщить Webpack о многофайловом компоненте (например, Angular), но яничего не найти в Интернете.

Я скопирую в конфигурацию, которую я сейчас, с некоторыми комментариями, которые я прокомментировал во время тестирования.

module.exports = {
  chainWebpack: config => {
    if (process.env.NODE_ENV === "development") {
      config
        .output
        .filename("[name].[hash].js")
        .end();
    }
  },
  chainWebpack: config => {
    config.module
        .rule("vue")
        .use("vue-svg-inline-loader")
            .loader("vue-svg-inline-loader")
            .options({ /* ... */ });
  },
  configureWebpack: {
    module: {
      rules: [
        {
          exclude: /index.html/,
          loader: "vue-template-loader",
          options: {
            transformToRequire: {
              // The key should be element name,
              // the value should be attribute name or its array
              img: "src",
            },
          },
          test: /.html$/,
        },
        /*{
          loader: "file-loader",
          options: {
            name: "[name].[ext]?[hash]",
          },
          test: /\.(png|jpg|gif|svg)$/,
        },*/
        /*{
          test: /\.(svg)(\?.*)?$/,
          use: [
            {
              loader: "svg-inline-loader",
              options: {
                limit: 10000,
                name: "assets/img/[name].[hash:7].[ext]",
              },
            },
          ],
        },*/
      ],
    },
  },
  publicPath: "/",
};

С тех пор я сделал обходной путь CSS для встраиваниятаким образом, но если у кого-то есть совет Webpack / Vue.config.js, я буду признателен.

Я пытался ../../, ../, ./ и комбинации@ / и ~ / и ~ @ / перед изображением.

Answer 1

Пока я обошел проблему, используя <img class="img-fluid" :src="require('@/assets/logo.png')" alt="CompanyLogo">.