首页 > 其他分享 >vite引入图片

vite引入图片

时间:2022-09-30 17:58:24浏览次数:48  
标签:vue img HelloWorld resolve 引入 import 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>

标签:vue,img,HelloWorld,resolve,引入,import,vite,图片
From: https://www.cnblogs.com/IwishIcould/p/16745692.html

相关文章

  • Arco Pro + Vite + vue3 + ts 动态引入组件
    有个需求是在组件中动态导入组件, 但vite自身对动态字符串形式的组件引入是有限制的, 以下写法会报错   官方文档中也对此有做说明   改为以下形式就不......
  • HTML08.图片元素
    图片元素img元素单词缩写:image缩写,空元素src属性:source表示资源,用于指定图像文件的路径和文件名,他是img标签的必须属性。站外属性:就直接右键保存图片地址然后复......
  • 图片降噪软件:Topaz DeNoise AI (图像处理)
    TopazDeNoiseAI是一款好用且专业的图片降噪软件。如果你有噪点的相片,可以通过AI智能的方式来处理掉噪点,让照片的噪点降到最低。有了TopazDeNoiseAI处理图片更方便,更简......
  • 获取图片并预览
    环境介绍:代码工具:VisualStudio2022开发框架:.netformwork4.7.2开发须知当前我所了解的有.netcore以及.netformwork两种框架.netformwork:这个是微软专用......
  • 分享一个Vue实现图片水平瀑布流的插件
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助一.需求来源今天碰到了一个需求,需要在页面里,用水平瀑布流的方式,将一些图片进行加载,这让我突然想起我很久......
  • js 根据 base64 和图片 宽高 ,截取参数 裁减图片 并且返回 处理后的 base64 图片
    参考来源https://stackoverflow.com/questions/31193418/html5-canvas-todataurl-returns-blankhttps://www.geeksforgeeks.org/how-to-crop-images-in-reactjs/https:/......
  • Ant Design Vue 在表格中插入图片
    这两天一直在用Antdv做一些小demo,今天在做表格的时候想在表格中插入图片,简单翻了下文档和国内的博客,发现所有的方法竟然都不好使,最后还是在官网的示例代码中看到相关的部......
  • Vue CLI 和 Vite
    一、VueCLI脚手架1.安装和使用1.1系统全局安装npminstall@vue/cli-g1.2升级VueCLI如果是比较旧的版本,可以通过下面的命令来升级npmupdate@vue/cli-g1.......
  • 直播平台源代码,uni-app上传图片方法封装
    直播平台源代码,uni-app上传图片方法封装 functionchooseImg(count,success){console.log(count)uni.chooseImage({count:count,success:res=>{//console.log(re......
  • 鼠标移入,图片放大
    效果之前:之后Code<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鸟教程(runoob.com)</title></head><body> <divclass="rect"> <imgsrc="h......