diff --git a/.eslintrc.js b/.eslintrc.js
index 38a5a5db70..42669a0a5a 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -45,7 +45,33 @@ module.exports = {
ignorePatterns: ['*.md'],
overrides: [
{
- files: ['layouts/**/*.{js,ts,vue}', 'pages/**/*.vue'],
+ files: [
+ 'layouts/**/*.{js,ts,vue}',
+ 'pages/**/*.vue',
+ 'components/**/*.{js,ts,vue}',
+ ],
+ rules: {
+ 'no-restricted-imports': [
+ 'warn',
+ {
+ patterns: [
+ {
+ group: [
+ '*.png',
+ '*.jpg',
+ '*.jpeg',
+ '*.gif',
+ '*.bmp',
+ '*.svg',
+ '*.webp',
+ ],
+ message:
+ 'It is recommended to utilize HTML tags and using a URL path, instead of directly importing images using JavaScript',
+ },
+ ],
+ },
+ ],
+ },
},
],
}
diff --git a/STYLE_GUIDE.md b/STYLE_GUIDE.md
index cce96fda56..1466f919a4 100644
--- a/STYLE_GUIDE.md
+++ b/STYLE_GUIDE.md
@@ -17,6 +17,7 @@ With a few exceptions, code and comments should be written in **English** only.
- **Typescript**, **Javascript** and **GraphQL** files use **camelCase** (`globalVariables.ts`, `getKey.js`, `collectionById.graphql`)
- **SCSS** files use **kebab-case** (`initial-variables.scss`)
- **JSON** files use **snake_case** (`all_lang.json`) while **Markdown** files use **SCREAMING_SNAKE_CASE** (`CONTRIBUTING.md`)
+- **Image** files use **kebab-case** (`my-image.webp`) and **.webp** is the preffered image format
## SFC Conventions
### Skeleton
@@ -238,3 +239,23 @@ for (const element of array) {
// your statement
}
```
+
+### images
+
+When working with images, it is recommended to utilize HTML tags and using a URL path,
+instead of directly importing images using JavaScript
+
+❗ bad
+```js
+// bad
+import logo from './path/to/my-image.webp'
+```
+
+✅ good
+```html
+
+
+
+
+
+```
\ No newline at end of file