vite引入图片

原创

朦胧淡月 2022-10-03 15:17:39 博主文章分类：vite ©著作权

©著作权归作者所有：来自51CTO博客作者朦胧淡月的原创作品，请联系作者获取转载授权，否则将追究法律责任

vite引入图片出现的问题 -不能够页面

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

结果图片压根就没有显示出来

vite引入图片_支付宝

有的小伙伴说通过 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>