首页 > 其他分享 >vue中引入图片等静态资源的几种方式

vue中引入图片等静态资源的几种方式

时间:2023-09-04 14:24:10浏览次数:34  
标签:vue assets 静态 几种 import 引入 logo png

在vue中引入图片等静态资源,由于部署的时候需要打包,打包后文件名字路径不一致,导致显示不了。以下为解决的几种方式:

1.样式直接引入: 

 <div class="imgItem">
    <div class="imgLogo"></div>
</div>


.imgLogo {
    width: 100px;
    height: 100px;
    background: url('/@/assets/logo.png');
    background-size: cover;
}

2.作为变量引入

<div class="imgItem">
   <div :style="{ backgroundImage: `url(${importLogo})` }" class="imgLogos"></div>
</div>

a.

import Logo from '/@/assets/logo.png'
  const importLogo = ref(Logo)

b.文件需要放在public文件夹

const importLogo3 = ref('/scene.jpg')

c.

onMounted(() => {
    import('/@/assets/logo.png').then((res) => {
        importLogo4.value = res.default
    })
})

d.

onMounted(() => {
    importLogo5.value = new URL('../assets/logo.png',import.meta.url)
})

 代码地址:https://gitee.com/yuexiayunsheng/vue3learn/blob/master/src/views/ImportImg.vue

标签:vue,assets,静态,几种,import,引入,logo,png
From: https://www.cnblogs.com/foxing/p/17665194.html

相关文章

  • vue3+vite使用require引用图片失效问题
    首先,这个问题的原因跟vue无关,是vite引用只支持import,require是隔壁webpack的引用方式,vite用自身的url可以用import.meta.url来拼装项目路径,如下:这个原理只不过是在发布的地址上去找对应图片,而且只会找项目中public文件夹下的图片资源,assets文件夹下的图片资源找不到(原因是publ......
  • vue学习
    ......
  • vue3 使用vue-router 进行网页跳转以及获取问号后面的参数
    关键代码:constrouter=useRouter()constauthor='myname'router.push({name:'Edit',query:{author}})constroute=useRoute()constvalue=route.query.key详细步骤:0.Initialgitclonehttps://github.com/element-plus/element-plus-v......
  • Vue.js 组件的2种创建使用方法
    创建组件的两种方式1.全部注册组件Vue.commpent('自定义标签名',{ //组件有自己的一个data函数,也只能是函数 组件不可有根节点el属性 data:function(){ return{ //返回data中的数据 } //模板 template:` `, methods:{ //组件的方法 }, computed:{ //计算属性 }, watch:{ //......
  • Vue-----模板插值-----(v-once、v-html、v-bind使用)
    1、v-once当组件在进行变量插值时只会插值一次。某些情况下,某些组件的渲染是由变量控制的,但是我们想让它一旦渲染后就不能够再被修改,可以是由v-once来实现<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="widt......
  • Vue element 表格跨行合并单元格
    1、定义table.js/***生成表格合并行坐标阵列rowspan、colspan信息*@param{表格数据}tableData*@param{合并列字段}mergeColumnsexample:["filed1",[filed2]]*@returns坐标阵列*/exportfunctiongetTableSpanMap(tableData,mergeColumns){varspa......
  • Linux下启动 jar 包的几种常见方式
    Linux下通过java命令启动jar包的几种常见方式方法一:直接启动jar包java-jarXXX.jar1缺点:当前ssh窗口会被锁定,不能再操作其他命令,如果需要执行其他命令,则需要打断进程,可按CTRL+C打断程序运行,或直接关闭窗口,程序也会退出。方法二:后台启动jar包java-jarXXX.jar&1&代表......
  • VUE 打开新页面方法记录
    1.使用VUERouter主要使用router的resolve方法进行路径及参数构造jumpPage(){letrouteData=this.$router.resolve({name:"newPage",query:{name:"zs"}})window.open(routeData.href,"_blank&qu......
  • 动态库&&静态库&&MakeFile
    库文件概念库文件就是将一堆函数的源代码封装在一起,经过编译之后形成一种可执行的二进制代码(但是不可以独立执行),供自己或者他人调用在linux下,有非常多的目录存在库文件比如:/lib------>linux协同库文件,一般是linux自带的/usr/lib------>有的是系统自带的,有的是用户自定......
  • Vue2.0 使用wangEditor(富文本编辑器)
     1、安装npminstallwangeditor--save2、页面中使用2.1定义容器<divid="content"></div>2.2引用wangeditor//引入wangeditorimportwangEditorfrom"wangeditor";2.3创建实例,调用它的方法,使页面中呈现富文本编辑在mouted()勾子函数中操作mounted(){......