vite引入圖檔

vite引入圖檔出現的問題 -不能夠頁面

<template>
    <div>
        <div>
            
            <img class="imgsize" sr="../../assets/img/xiaoxiannv.png"/>
            <p>小仙女</p>
        </div>
    </div>
</template>      

結果圖檔壓根就沒有顯示出來

有的小夥伴說通過 import 方式引入圖檔--失敗

<template>
    <div>
        <div>
            <img class="imgsize" :sr="imgurl"/>
            <p>小仙女</p>
        </div>
    </div>
</template>
<script setup lang="ts">
import imgurl  from "../../assets/img/xiaoxiannv.png"
</script>      

配置 @ 别名

第一步: cnpm install @types/node --save-dev [僅在開發環境中使用] 【我使用的是這個庫】
或者使用這個庫 yarn add package-name --dev [僅在開發環境中使用]

第2步:配置vite.config.ts檔案 如下:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 配置别名需要的路徑子產品
import { resolve } from 'path'
export default defineConfig({
  plugins: [vue()],
  // 配置别名
  resolve: {
    alias: [
      {
        find: '@', //指向的是src目錄
        replacement:resolve(__dirname,'src')
      }
    ]
  },
})

第3步:驗證别名是否成功
我們可以将  import HelloWorld from './components/HelloWorld.vue'
更改為  import HelloWorld from '@/components/HelloWorld.vue'
經過驗證時ok的，别名設定成功      

通過 @ 别名 引入圖檔--失敗

<template>
    <div>
        <div>
            <img class="imgsize" :sr="imgurl"/>
            <p>小仙女</p>
        </div>
        <HelloWorldVue></HelloWorldVue>
        
    </div>
</template>
<script setup lang="ts">
import imgurl from "@/assets/img/xiaoxiannv.png"
import HelloWorldVue from "@/components/HelloWorld.vue";
</script>      

這樣的方式就可以成功引入圖檔

resolve: {
    alias: [
      {
        find: "@", //指向的是src目錄
        replacement: resolve(__dirname, "src"),
      },
      {
        find: "@img",
        replacement: resolve(__dirname, "src/assets/img/"),
      },
    ],
  },      

<template>
    <div>
        <div>
            <img :src="urlimg"/>
            <p>小仙女</p>
        </div>
    </div>
</template>
<script setup lang="ts">
import urlimg from "@img/xiaoxiannv.png"
</script>      

遇見問題，這是你成長的機會，如果你能夠解決，這就是收獲。