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>
标签:vue,img,HelloWorld,resolve,引入,import,vite,图片
From: https://www.cnblogs.com/IwishIcould/p/16745692.html