打包工具动态资源动态引入

这篇具有很好参考价值的文章主要介绍了打包工具动态资源动态引入。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

//template中
<img :src="boxHerf" />

//js
let boxHerf = ref('/src/assets/images/contain.svg')

打包工具动态资源动态引入

上述写法本地能够正常访问图片,但是打包之后无法正常访问,将 boxHerf 换成下列写法即可解决

let boxHerf = new URL('/src/assets/images/contain.svg', import.meta.url).href;

注意:new URL(url,import.meta.url) 中的参数 url ,不能如下面定义变量拼接

const getPath = (url) => {
  let path = 'src/assets';
  return new URL(`${path}${url}`, import.meta.url).href;
};

上述开发没问题,但是打包会报错,不支持import.meta.url

new URL()

创建一个新 URL 对象的语法:new URL(url, [base])

  • url —— 完整的 URL,或者仅路径(如果设置了 base),

  • base —— 可选的 base URL:如果设置了此参数,且参数 url 只有路径,则会根据这个 base 生成 URL。

'/src/assets/images/contain.svg'是相对路径,而import.meta.url 是 base url (根链接)。

import.meta

import.meta 对象包含关于当前模块的信息。

它的内容取决于其所在的环境。在浏览器环境中,它包含当前脚本的 URL,或者如果它是在 HTML 中的话,则包含当前页面的 URL。

因此可以把import.meta 打印出来:

console.log("import.meta.url" ,import.meta)

//import.meta.url

打包工具动态资源动态引入

es6使用require引入图片

1、直接写成静态的是没有问题的

let imgUrl = require('../images/001.png');

2、如果你想动态的引入图片,就会报错

let ImgSrc = "../images/001.png";
let img = require(ImgSrc)

因为require是打包工具所需要的标识,你写成运行时通过变量定义,是无法获取到,没办法打包。

3、require()写入的必须是path

let imgSrc = "001.png";
require("../../asset/images/" + imgSrc);
let imgName = "001";
require(`../../asset/images/${imgName}.png`);

注:require是webpack的语法,vite无法使用文章来源地址https://www.toymoban.com/news/detail-745729.html

到了这里,关于打包工具动态资源动态引入的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • webpack5基础使用(1)-介绍、打包文件、处理样式资源(css、less)文件、配置文件内容、eslint工具检测语法、babel工具es6语法转es5

    webpack5是一个 静态资源打包工具 。 会以一个或多个文件作为打包的入口,将整个项目所有文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件,就可以直接在浏览器端运行了 进一步来说就是: 当开发时,肯定会使用框架、es6模块化语法、less/sass等css预处

    2024年02月03日
    浏览(56)
  • 主动打包、高效管理的主题工具:逐浪HMS主题大师1.5-即速推送、华为小组件缓存优化、锁屏提取、资源审计、技术秘笈,移动主题设计利器

    主动打包:逐浪HMS主题大师1.3-即速推送、华为小组件缓存优化、锁屏提取、资源审计、技术秘笈,移动主题设计利器 新版功能 研发背景 软件架构 使用环境 启动使用 联系我们 界面欣赏 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-daQWCR6K-1685

    2024年02月07日
    浏览(91)
  • 基于vue-admin-template的动态路由的问题解决

    控制台报如下错误: 首先经过一番网上搜索,有说是webpack的原因,调试后发现不是,然后再排查后台返回的组件地址。 由于我的前端拼接组件地址的代码如下: 查看后台地址,错误原因即后台多加了个/,正确的组件地址为: 刚开始遇到此类问题时,总以为是前端是不是写

    2024年02月13日
    浏览(32)
  • ES之API系列--dynamic template(动态模板)的用法(有实例)

    原文网址:ES之API系列--dynamic template(动态模板)的用法(有实例)_IT利刃出鞘的博客-CSDN博客 说明         本文介绍ElasticSearch的dynamic template(动态模板)的用法(有实例)。 官网网址 https://www.elastic.co/guide/en/elasticsearch/reference/8.0/dynamic-templates.html 作用概述         动态模板是针对

    2023年04月16日
    浏览(37)
  • 20. Vue-element_template全屏和动态修改组件大小

    直接从 vue-elemten-admin 项目复制过来即可。 1. 提供获取size和修改size的方法 2. 复制组件 1. 直接从 vue-elemten-admin 复制组件 components/Screenfull /src/components/SizeSelect/index.vue /src/views/redirect/index.vue /src/icons/svg/size.svg /src/components/Screenfull/index.vue /src/icons/svg/exit-fullscreen.svg /src/icons/svg/fu

    2024年02月08日
    浏览(38)
  • 15. unity官网资源商店的免费资源引入自己项目中

    1. 说明 在unity开发中可以在官网引入一些免费的资源,免得自己找不到合适的素材 第一步: 首先进入Unity资源商店官网,https://assetstore.unity.com/,计入并登录自己的unity账号,如果没账号,可以注册一个。 然后选择 免费热门资源 ,在资源列表中选择适合自己的资源,在其右

    2024年02月04日
    浏览(59)
  • 【Webpack】打包资源的名称路径和清空打包资源

    此时输出文件目录: (注意:需要将上次打包生成的文件清空,再重新打包才有效果) 观察 dist 目录资源情况

    2024年02月21日
    浏览(31)
  • https页面中引入http资源的方式

    ​ https引入http要根据具体情况分析,但是解决问题的前提是要先了解二者概念和区别,以及找问题出在哪里。不同项目有不同配置,不一定每次遇到同样的问题,都能用同样的办法解决,但是可以从以往遇到的情况和解决问题的方法进行分析,下面是我遇到https 页面中引入

    2024年02月12日
    浏览(38)
  • 如何在Qt项目中引入图片资源

    首先,在Qt项目里创建一个目录 icon ,然后将图片资源放 icon 目录中 在Qt creator中创建resource file 右键项目 myqtdesign Add New... Qt Qt Resource File 输入文件名 myimage ,并在 CMakeLists.txt 加入 myimage.qrc 并保存(control + s) 3. 添加前缀 /images 右键 myimage.qrc 文件 Add Prefix... ,结果如下图: 添

    2024年02月13日
    浏览(52)
  • maven工程打包引入本地jar包

     在jar包的文件目录下执行:   maven仓库效果:   maven引入:

    2024年02月22日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包