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>

vite引入图片的更多相关文章

  1. css考核点整理(八)-在什么情况下通过img引入图片,什么情况用背景图引入?背景属性有哪些

    在什么情况下通过img引入图片,什么情况用背景图引入?背景属性有哪些

  2. vue中的js引入图片,必须require进来

    需求:如何components里面的index.vue怎样能把assets里面的图片拿出来. 1.在img标签里面直接写上路径: <img src="../assets/a1.png& ...

  3. vue.js中引入图片

    vue中引入图片 前言:vue中引入图片时,会显示不出来,除非在css中引入.而在template中或者js动态引入时,会显示不出图片. 解决一 图片通过后端返回引入网络图片路径即可. <div ...

  4. 如何在react&webpack中引入图片?

    在react&webpack项目中需要引入图片,但是webpack使用的模块化的思想,如果不进行任何配置,而直接在jsx或者是css中使用相对路径来使用就会出现问题,在webpack中提供了u ...

  5. react里面引入图片

    引入图片确实走了很多的坑,开始的认知里,所有静态页面都需要放在public里面能执行,代码是这样的 css .back{ background-image: url('/images/homeBack ...

  6. Vue如何在data中正常引入图片路径

    在Vue项目中通过data设置图片路径,然后在template中引入后页面无法显示图片,浏览器控制台报错:                        刚开始以为是路径出问题了,于是绝对路径.相对路 ...

  7. 关于vue项目中在js中引入图片问题

    <template> <div> <img v-for="(star,index) in stars" :src="star.src&quo ...

  8. 基于webpack实现多html页面开发框架八 html引入图片打包和公共页面模块复用

    一.解决什么问题 1.html中img引入的图片地址没有被替换,找不到图片 2.html公共部分复用问题,如头部.底部.浮动层等 二.html中img引入图片问题解决 1.在index.html插入i ...

  9. 如何在vue中引入图片?

    当我们在Vue.js项目中引用图片时,关于图片路径有以下几种情形: 使用一. 我们在data里面定义好图片路径 imgUrl:'../assets/logo.png' 然后,在template模板里面 ...

  10. React(4) --引入图片及循环数据

    引入图片的方法 1.引入本地图片 方法1: import logo from '../assets/images/1.jpg'; <img src={logo} /> 方法2: <i ...

随机推荐

  1. 一文带你了解什么是GitOps

    摘要:说起GitOps,可能很多朋友马上会联想到DevOps,那么GitOps和DevOps之间有什么关系.又有什么区别呢? 本文分享自华为云社区<浅谈GitOps>,作者: 敏捷的小智. ...

  2. Taro架构构析(1):多端框架分析,Taro WePY uni-app对比

    多端框架分类 全包型 这类框架最大的特点就是从底层的渲染引擎.布局引擎,到中层的 DSL,再到上层的框架全部由自己开发,代表框架是 Qt 和 Flutter.这类框架优点非常明显:性能(的上限)高:各 ...

  3. web自动化测试(1):再谈UI发展史与UI、功能自动化测试

    前言(废话) 行文前,安利下文章:<图形界面操作系统发展史--计算机界面发展历史回顾>.<再谈MV*(MVVM MVP MVC)模式的设计原理-封装与解耦> 1973年4月,X ...

  4. 火山引擎A/B测试:MAB智能调优实验,企业活动效果提升新利器

      618临近,各大电商APP的预热活动已然拉开序幕.对企业而言,一场活动从策划到上线,中间经过效果验证,其业务成本很高.一个好的活动创意从策划.开发.到最终发布,至少会经历几周实践,如果中间还经历A ...

  5. 在 macOS 通过 SSH 访问 Windows 的 WSL2 Ubuntu

    配置 Windows 和 WSL2,使得能通过其他电脑远程 SSH 到 WSL2 Ubuntu. 一.Win10 安装 WSL2 Ubuntu 注意,是安装 WSL2,方法参考这个 WSL2 配置 C ...

  6. Spring 学习笔记(5)AOP

    本文介绍 Spring 中 AOP 的原理及使用方式. Spring AOP 简介 如果说 IoC 是 Spring 的核心,那么面向切面编程就是 Spring 最为重要的功能之一了,在数据库事务中切 ...

  7. Serverless 架构下的 AI 应用开发

    Serverless架构与CI/CD工具的结合 CI/CD 是一种通过在应用开发阶段引入自动化流程以频繁向客户交付应用的方法.如图所示,CI/CD 的核心概念是持续集成.持续交付和持续部署. 作为一个 ...

  8. java向一个压缩包里增加文件

    如果遇到,向现有的压缩包里增加文件的需求可以参照如下的方式: 思路:1.先将压缩包解压 2.删除旧的压缩包 3.将解压后的文件和希望添加的文件一起重新生成一个压缩包 4.将第一步中解压后的文件删除. ...

  9. iview 将Modal抽取成组件并控制Modal的显示隐藏

    开发中遇到Modal弹出框的内容太多,就想把Modal单独分装成一个组件,但是发现封装成组件后Modal的关闭和打开有问题.如下方法可以解决这个问题. 父级页面: <PriceInfodModa ...

  10. 3 Englishi 词根

    1 -able 能..的:具有...性质的 useable moveable adaptable 2 -al  具有...性质的; 属于...的 personal natural regional - ...