Vite Vue3 使用图片注意事项

一、img 标签

<img src="@/assets/images/discord.ico" />

src属性中使用@符号来资源定位。

二、background-image和url()使用

1. 内联使用

templete如下：

<template>
  <div :style="{ backgroundImage: `url(${U191})` }"></div>
</template>

在script中需要导入：

<script lang="ts" setup>
  import U191 from '@/assets/images/u191_state0.jpg';
</script>

2. less中使用

templete如下：

<template>
  <div id="test"></div>
</template>

less样式如下：

<style lang="less" scoped>
  #test {
    background-image: url('@/assets/images/u194_state0.jpg');
  }
</style>

三、使用SVG注意事项

如果项目中使用了svgLoader插件，以url形式使用svg时，需指定导入类型。

import svgLoader from 'vite-svg-loader';

最直接的解决方法使用?url：

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

import U193 from '@/assets/images/u193.svg?url';