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 或复制的。

我怀疑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"> 解决了这个问题。