如何使用webpack和Vue加载器在Vue应用程序中加载我的图像

Question

我是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!

Answer 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")
}