babel-plugin-jsx-asset-url-import

Extract and transform static url to import in JSX

English | 简体中文

Example

Input

import React from 'react';

const App: React.FC = () => {
  return <img src="./logo.png" alt="" />
}

Output

import React from 'react';
import _import_assets from './logo.png';

const App: React.FC = () => {
  return <img src={_import_assets} alt="" />
}

Installation & Usage

pnpm add -D babel-plugin-jsx-asset-url-import

babel.config.js

export default {
  plugins: ['jsx-asset-url-import'],
};

Options

includeAbsolute

• type: boolean
• default: false

Include absolute paths when extracting

tags

• type: Record<string, string[]>

• default:

  {
    audio: ['src'],
    embed: ['src'],
    img: ['src', 'srcSet'],
    input: ['src'],
    object: ['data'],
    source: ['src', 'srcSet'],
    track: ['src'],
    video: ['poster', 'src'],
    image: ['xlinkHref', 'href'],
    use: ['xlinkHref', 'href'],
  }

Configure tags and attributes for extraction. If you want to extract the attributes of custom components. Please add it here. Plugin internals will be merged with the default configuration

If your component is contained in object, similar to <Foo.Bar src="./logo.png" /> . Please configure as 'Foo.Bar': ['src']

If you want to disable default rules. Please configure as img: []

Reference & Thanks

• vue-compiler-sfc - The source of inspiration for this project
• babel-handbook - Thanks for providing the Chinese handbook
• srcset-parse - Thanks for @molefrog, Dealing with srcset is giving me headaches
• babel-plugin-transform-jsx-url
• babel-plugin-transform-react-jsx-img-import