vue -vite |静态SVG资产

发布于 2025-02-12 19:06:36 字数 230 浏览 2 评论 0原文

在我的Vue Vite应用程序中，我尝试将SVG文件用作HTML元素中的SRC属性。

<img class="..." src="/src/assets/images/bg/main-banner.svg" alt="Background">

在开发中，它可以按预期工作。在生产中，图像的SRC属性为 [对象对象] 。我尝试了从

谢谢。

原文

In my Vue vite app, I am trying to use svg file as src attribute in html element.

<img class="..." src="/src/assets/images/bg/main-banner.svg" alt="Background">

In development, it works as expected.
In production, the src attribute of the image is [object Object]. I tried every approach from Vite documentation , but none of these could fix the issue. I am using vite-svg-loader, so I can use svg files as Vue Components. Could this be somehow related to the issue?

Thank you.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

野侃 2025-02-19 19:06:36

使用`vite-svg-loader`

vite-svg-loader原因*。svg默认情况下解决为VUE组件，将转换为一个转换为一个＆lt; img＆gt; .src属性的字符串，导致[Object Object]。

为了将*。svg作为URL加载，您可以将加载程序配置为导入url默认情况下：

// vite.config.js

import { defineConfig } from 'vite'

import svgLoader from 'vite-svg-loader'
export default defineConfig({

  plugins: [

    svgLoader({

      defaultImport: 'url',

With `vite-svg-loader`

vite-svg-loader causes *.svg to resolve as Vue components by default, which would be converted into a string for the <img>.src attribute, resulting in [object Object].

To load the *.svg as a URL instead, you can either configure the loader to import the url by default:

// vite.config.js
import { defineConfig } from 'vite'
import svgLoader from 'vite-svg-loader'

export default defineConfig({
  plugins: [
    svgLoader({
      defaultImport: 'url', ????
    }),
  ],
})

demo 1

...or use a url import param:

                             ????
<img src="@/assets/logo.svg?url" />

demo 2

Without `vite-svg-loader`

If you just want to get the *.svg's URL, you actually don't need vite-svg-loader, as that's a built-in feature. Removing vite-svg-loader should resolve the issue:

// vite.config.js
import { defineConfig } from 'vite'
// import svgLoader from 'vite-svg-loader' ⛔️ delete

export default defineConfig({
  plugins: [
    // svgLoader() ⛔️ delete
  ],
})

demo 3

回复收藏 0 原文

舟遥客 2025-02-19 19:06:36

尝试将其导入作为模块，然后将其绑定到src属性：

import mainBanner from "~/assets/images/bg/main-banner.svg"

<img class="..." :src="mainBanner" alt="Background">

Try to import it as module then bind it to the src attribute :

import mainBanner from "~/assets/images/bg/main-banner.svg"

<img class="..." :src="mainBanner" alt="Background">

回复收藏 0 原文

一个人的旅程 2025-02-19 19:06:36

我也有一个类似的问题，我想导入许多横幅，例如main-banner1.svg，main-banner2.svg，等等，所以我尝试

<img :src="`/src/assets/images/bg/main-banner${bannerId}.svg`" alt="Background">

了试图用另一种视图重新使用横幅时的问题。

我的解决方案是将SVG文件移至public文件夹，并使用路径为：

<img :src="`/main-banner${bannerId}.svg`" alt="Background">

请注意，这也可以防止VITE添加散布到文件名。

Note ：也可以在public文件夹中的子文件夹中组织所有内容以使用原始路径。

<img :src="`/src/assets/images/bg/main-banner${bannerId}.svg`" alt="Background">

I had a similar issue, I wanted to import many banners, like main-banner1.svg, main-banner2.svg, and so on, so I tried

<img :src="`/src/assets/images/bg/main-banner${bannerId}.svg`" alt="Background">

but I had a problem when trying to re-use the banner with another view.

My solution was to move the svg file to the public folder and use the path as:

<img :src="`/main-banner${bannerId}.svg`" alt="Background">

Note that this also prevents Vite from adding hashing to the file names.

Note: It is also possible to organize everything in sub-folders in the public folder to use the original path.

<img :src="`/src/assets/images/bg/main-banner${bannerId}.svg`" alt="Background">

回复收藏 0 原文

~没有更多了~

关于作者

奶茶白久

暂无简介

文章

26 人气

关注发私信

友情链接

文江博客

vue -vite |静态SVG资产

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

使用`vite-svg-loader`

With `vite-svg-loader`

Without `vite-svg-loader`

关于作者

相关话题

热门标签

推荐作者

佚名

今天

゛时过境迁

达拉崩吧

呆萌少年

孤者何惧

友情链接

vue -vite |静态SVG资产

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

使用vite-svg-loader

With vite-svg-loader

Without vite-svg-loader

关于作者

相关话题

热门标签

推荐作者

佚名

今天

゛时过境迁

达拉崩吧

呆萌少年

孤者何惧

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

使用`vite-svg-loader`

With `vite-svg-loader`

Without `vite-svg-loader`