家好，在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)
  })
}

我推薦這種方式，因為它限制更少，功能全面。

總結

遇到問題，查官網。官網不懂，問博主。