Repository: marktext/marktext
File: src/renderer/prefComponents/image/index.vue (Vue)

Code before:
<template>
  <div class="pref-image">
    <h4>Image</h4>
    <section class="image-ctrl">
      <div>Default action after image is inserted from local folder or clipboard
        <el-tooltip class='item' effect='dark' content='Clipboard handling is only fully supported on macOS and Windows.' placement='top-start'>
          <i class="el-icon-info"></i>
        </el-tooltip>
      </div>
      <el-radio-group v-model="imageInsertAction">
        <el-radio label="upload">Upload to cloud using selected uploader (must be configured)</el-radio>
        <el-radio label="folder">Move to designated local folder</el-radio>
        <el-radio label="path">Keep original location</el-radio>
      </el-radio-group>
    </section>
    <separator></separator>
    <section class="image-folder">
      <text-box
        description="Local image folder"
        :input="imageFolderPath"
        :regexValidator="/^(?:$|([a-zA-Z]:)?[\/\\].*$)/"
        :defaultValue="FolderPathPlaceholder"
        :onChange="value => modifyImageFolderPath(value)"
      ></text-box>
      <div>
        <el-button size="mini" @click="modifyImageFolderPath()">Modify</el-button>
        <el-button size="mini" @click="openImageFolder">Open Folder</el-button>
      </div>
      <bool
        description="Prefer relative assets folder"
        more="https://github.com/marktext/marktext/blob/develop/docs/IMAGES.md"
        :bool="imagePreferRelativeDirectory"
        :onChange="value => onSelectChange('imagePreferRelativeDirectory', value)"
      ></bool>
      <text-box
        description="Relative image folder name"
        :input="imageRelativeDirectoryName"
        :regexValidator="/^(?:$|(?![a-zA-Z]:)[^\/\\].*$)/"
        :defaultValue="relativeDirectoryNamePlaceholder"
        :onChange="value => onSelectChange('imageRelativeDirectoryName', value)"
      ></text-box>
    </section>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { shell } from 'electron'
import Bool from '../common/bool'
import Separator from '../common/separator'
import TextBox from '../common/textBox'

Review comment (suggestion):
You need to pass the `imageFolderPath` here, otherwise the path is `null`.

Code after:
<template>
  <div class="pref-image">
    <h4>Image</h4>
    <section class="image-ctrl">
      <div>Default action after image is inserted from local folder or clipboard
        <el-tooltip class='item' effect='dark' content='Clipboard handling is only fully supported on macOS and Windows.' placement='top-start'>
          <i class="el-icon-info"></i>
        </el-tooltip>
      </div>
      <el-radio-group v-model="imageInsertAction">
        <el-radio label="upload">Upload to cloud using selected uploader (must be configured)</el-radio>
        <el-radio label="folder">Move to designated local folder</el-radio>
        <el-radio label="path">Keep original location</el-radio>
      </el-radio-group>
    </section>
    <separator></separator>
    <section class="image-folder">
      <text-box
        description="Local image folder"
        :input="imageFolderPath"
        :regexValidator="/^(?:$|([a-zA-Z]:)?[\/\\].*$)/"
        :defaultValue="folderPathPlaceholder"
        :onChange="value => modifyImageFolderPath(value)"
      ></text-box>
      <div>
        <el-button size="mini" @click="modifyImageFolderPath()">Modify</el-button>
        <el-button size="mini" @click="openImageFolder">Open Folder</el-button>
      </div>
      <bool
        description="Prefer relative assets folder"
        more="https://github.com/marktext/marktext/blob/develop/docs/IMAGES.md"
        :bool="imagePreferRelativeDirectory"
        :onChange="value => onSelectChange('imagePreferRelativeDirectory', value)"
      ></bool>
      <text-box
        description="Relative image folder name"
        :input="imageRelativeDirectoryName"
        :regexValidator="/^(?:$|(?![a-zA-Z]:)[^\/\\].*$)/"
        :defaultValue="relativeDirectoryNamePlaceholder"
        :onChange="value => onSelectChange('imageRelativeDirectoryName', value)"
      ></text-box>
    </section>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { shell } from 'electron'
import Bool from '../common/bool'
import Separator from '../common/separator'
import TextBox from '../common/textBox'