Vue3动态引入图片全过程
更新时间：2025年08月30日 14:08:53 作者：水果摊见
在Vite项目中,动态引入background-image需使用import或newURL方法,避免打包路径问题,静态资源存放在src/assets,建议使用绝对路径/开头确保正确引用
背景
需要动态引入background-image，如果在css中静态写入的话没有问题，但是使用变量动态引入，由于vite打包后，无法找到路径。
静态资源
项目中需要使用的图片等静态资源一般存放在src/assets文件夹下。
background-image使用url方式引入，如果动态引入的话需要使用import、new URL(url, import.meta.url)这样的方式。
const getAssetsFile = (url: string) => {
return new URL(`../assets/images/${url}`, import.meta.url).href;
};
而在html中使用动态style引入
<div style={{ backgroundImage: `url(${getAssetsFile('Image.png')})` }}></div>
即可实现资源的动态引入。
使用绝对路径
这里也可以使用绝对路径，以 / 作为开头，就是绝对路径。
例如：资源在src/assets/images下：
new URL(`/src/assets/images/${url}`, import.meta.url).href;
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue封装一个简单的div框选时间的组件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
为了方便大家写代码，Vue给大家提供了很多方便的修饰符，比如我们经常用到的取消冒泡，阻止默认事件等等，这篇文章将给大家分享Vue 中的常用的修饰符2022-10-10
这篇文章主要介绍了vue使用v-for循环获取数组最后一项问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了vue中监听路由参数的变化,给大家介绍了vue中监听路由参数变化的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-12-12
我们在做vue项目时,经常会需要引入js,下面这篇文章主要给大家介绍了关于vue引用外部JS并调用JS文件中的方法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-02-02
vue项目中vue-echarts讲解及常用图表实现方案(推荐)
这篇文章主要介绍了vue项目中vue-echarts讲解及常用图表方案实现,主要针对代码示例中的内容进行问题讲解，详细代码在文章中给大家提到，需要的朋友可以参考下2022-09-09
该文章主要介绍了如何在Vue项目中解决IE浏览器的兼容性问题,包括解决IE不兼容axios的Promise对象、ES6语法以及polyfill的使用方法,通过配置babel-polyfill、es6-promise和转ES5语法,解决了在IE浏览器中常见的兼容性问题,需要的朋友可以参考下2025-01-01
Axios是一个基于promise的HTTP库，可以用在浏览器和node.js中。axios是目前最优秀的HTTP请求库之一,我们封装axios请求也是为了让代码看的更加清晰,后期好维护2023-02-02
Vue是一套用于构建用户界面的渐进式框架,它的核心库只关注视图层,易于上手,也便于与其他库或已有项目整合,下面这篇文章主要给大家介绍了关于如何运行vue项目的相关资料,需要的朋友可以参考下2023-05-05
这篇文章主要为大家详细介绍了vue全局实现数字千位分隔符格式，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
最新评论