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>
