家好，在flux中图片css样式、gs文件都属于静态文件，在html模板里如何导入静态文件？

·首先静态文件需要存放在项目根目录的static文件夹里，需要手动的来创建这个文件夹，然后再创建各类别的文件夹存放各种静态文件。比如在study文件夹里创建一个image图片的文件夹用于存放图片文件。

·然后还可以创建名称为gs的文件夹来存放gs文件，也可以创建文件名为css的文件夹来存放css样式的文件。这里在image文件夹里存放一张图片文件。顺便说一下，这张图片是我在辽宁千山的景区拍摄的，千山我觉得真的是非常的漂亮。

·在html文件里需要导入图片的地方新建一个IMG图片标签，在图片的路径参数里这样写。首先输入两个闭合的括号号，然后使用urlfall方法。

→第一个参数输入static表示引用静态文件夹。

→第二个参数使用file name，file name的值就是需要引入的图片在静态文件夹里的相对路径。

·图片可能比较大，可以给图片设置一个高度和宽度，运行Web服务，在浏览器里可以看到图片被显示了出来。

下个视频来学习如何引用css和js。

AVA中将WORD转换为HTML导入到CKEDITOR编辑器中（解决图片问题，样式，非常完美），ckeditor粘贴word,ckeditor3粘贴word,ckeditor4粘贴word,ckeditor5粘贴word内容，ckeditor复制word图片，ckeditor复制粘贴word图片，ckeditor复制word内容，ckeditor粘贴word图片，复制word图片粘贴到ckeditor，

前端用了VUE2,VUE3，React，HTML5，也是一个新项目，为了方便用的这些框架，实际上这个是无所谓，功能的实现和前端这些框架没什么关系。

后端用了PHP,JSP,ASP,ASP.NET,SpringBoot，功能实现和后端用的什么开发语言无关，后端只提供一个文件上传的接口，HTTP form协议，图片上传时会调这个接口。

编辑器是ckeditor5，为ckeditor编辑器增加粘贴Word图片的功能，支持快捷键操作（Ctrl+V），支持多种系统：Windows,macOS,Linux,信创国产化环境，中标麒麟，银河麒麟，统信，龙芯。

支持word粘贴，word内容粘贴,word图文粘贴,word图片粘贴，粘贴后图片能够自动上传到服务器中，然后将图片和内容HTML添加到编辑器中，上传接口地址能够自定义

用户使用操作起来更方便一些，一般发新闻，或者发文章用的比较多，基本上每天发新闻，发文章都会用到，

这个功能确实为用户带来了方便。

1.1. 集成到CKEditor3.x

主要步骤如下：

1.上传WordPaster文件夹

一般将WordPaster.cab放在WordPaster目录下。

2.上传CKEditor插件目录

3.引入JS，初始化控件

注意：不要重复引入jquery，如果您的项目已经引入了jq，则不用再引入jq-1.4

如果希望添加到默认工具栏中，请修改ckeditor.js，在toolbar_Full中增加imagepaster,netpaster

为ckeditor增加插件(imagepaster,netpaster,pptpaster,pdfimport)：

注意：

1.如果接口字段名称不是file，请配置FileFieldName。ueditor接口中使用的upfile字段

参考：http://www.ncmem.com/doc/view.aspx?id=c3ad06c2ae31454cb418ceb2b8da7c45

2.如果接口返回JSON，请配置ImageMatch

参考：http://www.ncmem.com/doc/view.aspx?id=07e3f323d22d4571ad213441ab8530d1

3.如果接口返回的图片地址没有域名，请配置ImageUrl

参考：http://www.ncmem.com/doc/view.aspx?id=704cd302ebd346b486adf39cf4553936
4.如果接口有权限验证（登陆验证，SESSION验证），请配置COOKIE。或取消权限验证。
参考：http://www.ncmem.com/doc/view.aspx?id=8602DDBF62374D189725BF17367125F3

常见问题：

1.为什么整合到项目中图片无法上传？
请先测试接口：http://www.ncmem.com/doc/view.aspx?id=61f361025c9247098f6a15c3dfc53db5

博主的桌面工具软件已经正式开发，获取方式：

• 可以关注我的小程序【中二少年工具箱】获取。（若小程序更新有延迟，可先收藏小程序）
• 通过下载链接
• 百度网盘: 链接：https://pan.baidu.com/s/15zDnSoEzJGSZLjpD2FYrMw?pwd=1234 提取码：1234 复制这段内容后打开百度网盘手机App，操作更方便哦

具体已实现功能，参考文章中二少年工具箱简介-CSDN博客

前言

项目中遇到一个场景，页面的标题栏结构基本相同，只是图片需要动态改变，不同类型的页面，进入后，加载不同的图片。

在这里插入图片描述

在这里插入图片描述

一、静态导入

代码示例

<img :src="imgt" alt="">

      import img from '@/common/assets/images/base-info/org-user-edit.png'

如果用静态导入的方式，那么就需要穷举所有可能情况，把所有图片都导入，然后加载，显然并不优雅。如果这个组件用在更多的模块，穷举的方式可能还会造成高耦合。

二、import函数

import(`/src/common/assets/images/base-info/${props.titleImg}`).then(res=>{
  console.log(res)
})

写文章这部分的时候，中文官网挂了，只能贴英文的截图了：

在这里插入图片描述

1. 文档翻译：vite支持原生import函数，但是变量中只能有一层文件路径，也就是说如果写成“import(${xxx}/common/assets/images/base-info/${props.titleImg})”或者titleImg是多层文件，例如：xxx/xxx.png，都会报错
2. 尽量不要在script中直接写await语法糖，否则容易造成一些不可预知的问题。比如说template已经渲染完毕，而函数部分阻塞，导致props中的变量无法解析，依赖props渲染的dom，可能会有异常。
3. 这样写有可能vite会报错：

The above dynamic import cannot be analyzed by Vite. See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the / @vite-ignore */ comment inside the import() call to suppress this warning.*

其实这是不用管的，如果感觉碍眼，可以增加vite忽略：/ @vite-ignore /，修改上面的代码为：

import(/* @vite-ignore */`/src/common/assets/images/base-info/${props.titleImg}`).then(res=>{
  pathr.value=res.default
})

三、new URL(url, import.meta.url)

这是vite官网介绍的一种方式，官网原文对它的介绍是：==import.meta.url 是一个 ESM 的原生功能，会暴露当前模块的 URL。将它与原生的 URL 构造器 组合使用，在一个 JavaScript 模块中，通过相对路径我们就能得到一个被完整解析的静态资源 URL==简单来说，就是通过当前模块的路径【import.meta.url】配合相对路径【url】，就能获取到绝对路径。

const path=new URL('../../',import.meta.url).href

在哪个模块调用上面的代码，就是得到模块祖父级文件的绝对路径。

四、import.meta.glob

最后介绍glob的方式。这是vite官网介绍的一种方式，官网介绍如下：

在这里插入图片描述

import.meta.glob可以得到一个json对象，对象的keys由符合条件的绝对路径组成，对应的value是函数，返回一个promise对象，所以根据路径筛选符合条件的json元素，然后运行对应的函数，就能得到资源。

获取对应目录下的所有图片地址：

const getPathFn=import.meta.glob('@/common/assets/images/base-info/**')[`/src/common/assets/images/base-info1/${props.titleImg}`]
if(getPathFn){
  getPathFn().then(res=>{
    console.log(res.default)
  })
}

我推荐这种方式，因为它限制更少，功能全面。

总结

遇到问题，查官网。官网不懂，问博主。