Vue - Vite _
Vue - Vite _
提问于 2022-07-04 08:27:21
在我的Vue vite应用程序中，我试图在html元素中使用svg文件作为src属性。
<img class="..." src="/src/assets/images/bg/main-banner.svg" alt="Background">在开发中，它如预期的那样工作。在生产过程中，图像的src属性是对象。我尝试了Vite文档的每一种方法，但这些方法都不能解决这个问题。我使用vite- svg -加载程序，所以我可以使用svg文件作为Vue组件。这会否与这个问题有关？
谢谢。
回答 2
Stack Overflow用户
发布于 2022-07-05 02:08:32
用vite-svg-loader
vite-svg-loader会导致*.svg在默认情况下解析为Vue组件，这将被转换为<img>.src属性的字符串，从而导致[object Object]。
要将*.svg作为URL加载，您可以选择默认情况下
// vite.config.js
import { defineConfig } from 'vite'
import svgLoader from 'vite-svg-loader'
export default defineConfig({
plugins: [
svgLoader({
defaultImport: 'url',
}),
],
})...or使用进口param
<img src="@/assets/logo.svg?url" />无vite-svg-loader
如果您只想获取*.svg的URL，实际上不需要vite-svg-loader，因为这是一个内置的特性。删除vite-svg-loader应该可以解决这个问题：
// vite.config.js
import { defineConfig } from 'vite'
// import svgLoader from 'vite-svg-loader' ⛔️ delete
export default defineConfig({
plugins: [
// svgLoader() ⛔️ delete
],
})Stack Overflow用户
发布于 2022-07-04 08:32:53
尝试将其作为模块导入，然后将其绑定到src属性：
import mainBanner "~/assets/images/bg/main-banner.svg"
<img class="..." :src="mainBanner" alt="Background">页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72853762
复制相关文章
相似问题
腾讯云开发者
