如何使用 webpack 和 vue-loader 将图像加载到 Vue 应用程序中？答案

【问题标题】：How do I get my images to load in Vue app using webpack and vue-loader?如何使用 webpack 和 vue-loader 将图像加载到 Vue 应用程序中？
【发布时间】：2022-01-11 16:24:42
【问题描述】：

我是 Vue 新手，正在处理 Vue 应用程序上的一些遗留代码，我不确定为什么我的图像没有加载到页面上。我知道我的组件到资产的路径是正确的，因为我有一个扩展程序可以在我的代码中显示图像，并且它们出现在那里。

我觉得问题源于这里...... 这是在我的 vue.config.js 文件中的：

  chainWebpack: (config) => {
    config.module
      .rule("vue")
      .use("vue-loader")
      .loader("vue-loader")
      .tap((options) => {
        options.transformAssetUrls = {
          img: "src",
          image: "xlink:href",
          "b-avatar": "src",
          "b-img": "src",
          "b-img-lazy": ["src", "blank-src"],
          "b-card": "img-src",
          "b-card-img": "src",
          "b-card-img-lazy": ["src", "blank-src"],
          "b-carousel-slide": "img-src",
          "b-embed": "src",
        };
        return options;
      });
  },
};```

I built my app from Vue CLI so it should have come built in with Webpack and vue-loader, right? 
Are there any other dependancies that need to be added separately for this to function?

Any help is appreciated, thanks!

【问题讨论】：

标签： vue.js webpack assets vue-loader

【解决方案1】：

我相信我和你有同样的问题！最终这是一个简单的修复，如果这有帮助，请告诉我。

<template>
  <main>
    <img src="../assets/logo.png" />
  </main>
</template>

<script>
import picture from '../assets/logo.png'


export default {
  name: 'HelloWorld',
  assets: picture
  }
}
</script>

无需导入，您仍然可以通过将照片用作元素的背景图像来访问照片

main {
  background-image: url(src="../assets/logo.png")
}

【讨论】：