From local to cloud, image URL batch conversion tool analyzes

By /

Project name: Image URL Converter
Project function: Picture bed
Project Information: A graph bed tool that can convert any image URL into a permanent link, hosted on Cloudflare R2. Just enter the original image URL to get a permanent link.

Hello everyone, today I will introduce you to a lightweight and practical open source project–image-url-converterThis is created by GitHub users weijunext Developed a command-line tool based on Node.js. Its main functions are:Batch convert the local image paths used in HTML files into online image URLs.

The main usage scenarios for this tool are:

  • When we write documents or blogs, we often insert pictures locally;
  • However, when publishing to websites or blog platforms (such as GitHub Pages, Notion, Blog Garden, etc.), the local image path will fail;
  • At this time, we need to upload these pictures to the graph bed and replace the addresses in the HTML. This tool comes in handy.

Project core functions

The project is essentially a CLI tool written through Node.js. The core process is divided into three steps:

  1. HTML parsing
    Extract the data from HTML files through regular matching <img> Tag and get pictures of src Attributes.

  2. Image upload (custom interface)
    Users can configure their own graph bed transfer interfaces, such as Qiniu, Alibaba Cloud OSS, or graph bed API. The tool will automatically upload the local image and get the returned URL.

  3. path replacement
    The tool will replace the local image path in the original HTML with the newly obtained online URL.

⚙️使用方式

#Clone Project
git clone https://github.com/weijunext/image-url-converter

#Install dependencies
npm install

#Performing transformation
node index.js path/to/your/file.html

Of course, you also need to modify the project based on actual conditions upload.js File to adapt to your own upload interface.

Brief analysis of project structure

  • index.js: Entry file, responsible for parsing HTML, processing uploads, and replacing paths;
  • upload.js: Upload logic, which can be customized on demand;
  • config.js: Configuration files, such as graph bed API information;
  • test.html: Sample HTML files to facilitate testing functions.

Who is it suitable for?

  • Developers with front-end blog writing needs;
  • Content creators who need to batch convert HTML into a publishable format;
  • Engineers who are developing CMS or graphics processing tools.

directions that can be expanded

  • Support Markdown file path replacement;
  • Integrate multiple graph bed adapters (such as SM.MS, imgur, Tencent Cloud);
  • Add Web UI or VSCode plug-ins;
  • Support image compression and upload to improve loading performance.

summary

image-url-converter Is a simple yet efficient tool that solves a seemingly small but common problem:Automatic replacement of picture paths when content is migrated from local to online。Through this project, we can also see how to quickly implement a practical automated process with Node.js. It is an open source example that is very suitable for secondary development and learning.

Project address:https://github.com/weijunext/image-url-converter
Oil tubing:

Scroll to Top