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">解决了该问题。

Vue，TypeScript，多文件组件，图像未得到处理

1 个答案: