vue3 jsx使用img

在 Vue 3 中使用 JSX 时，可以使用 `img` 标签来渲染图片。具体的用法如下：

1. 首先在 `setup()` 函数中引入需要使用的图片：

import myImage from './path/to/myImage.jpg'

2. 在 JSX 中使用 `img` 标签来渲染图片，并将图片路径作为 `src` 属性的值：

<img src={myImage} alt="My Image" />

完整的代码示例：

<template>
  <div>
    <h1>My Image</h1>
    <img src={myImage} alt="My Image" />
  </div>
</template>

<script>
import myImage from './path/to/myImage.jpg'

export default {
  setup() {
    return { myImage }
  }
}
</script>

注意：在使用 `img` 标签时，需要将图片路径作为 `src` 属性的值传递给标签，而不是将路径作为子元素传递给标签。

相关问题

vue3中使用jsx

在Vue 3中，引入了兼容React JSX语法的方式，使得开发者可以更方便地编写组件。Vue官方推荐使用`@vue/babel-plugin-jsx`这个插件来启用JSX支持。以下是使用jsx的基本步骤：

1. **安装依赖**：在项目中运行`npm install @vue/babel-plugin-jsx --save-dev` 或者 `yarn add @vue/babel-plugin-jsx -D` 来安装jsx插件。

2. **配置Babel**：在`.babelrc`或`babel.config.js`文件中添加以下配置，将jsx插件启用并设置其为全局转换模式：

{
  plugins: [
    '@vue/babel-plugin-jsx'
  ]
}

3. **开始编写jsx**：现在你可以像在React中一样编写jsx元素了。例如，在模板字符串中插入jsx：

<template>
  <div>
    <HelloWorld name="John" />
  </div>
</template>

<script setup>
import { h } from 'vue';

function HelloWorld({ name }) {
  return <h1>Hello, {name}!</h1>;
}
</script>

4. **注意点**：
- `h` 函数来自 `@vue/runtime-dom`，而不是 `vue`本身，所以需要导入它。
- 使用 `v-bind` 替代 React 中的 `{...props}`，比如 `<div v-bind:class="{ active: isActive }">...</div>`。
- Vue3 的JSX不支持自闭合标签，如 `<img />`，需要用 `/>` 结束。

vue3中如何使用svg图标 ts

在Vue3中使用SVG图标并启用TypeScript支持，可以按照以下步骤操作：

1. 安装依赖：首先确保安装了`vue-svg-loader`和`@types/vue`用于处理SVG图标和TypeScript支持。在项目目录下运行：

   npm install vue-svg-loader @types/vue --save-dev

2. 配置loader：在你的`webpack.config.js`或`.vue`预处理器配置文件中添加对SVG的支持。例如，在Vue CLI v3中可以在`configureWebpack`选项中设置：

   module.exports = {
     configureWebpack: {
       module: {
         rules: [
           {
             test: /\.svg$/,
             use: ['vue-svg-loader'],
           },
         ],
       },
     },
   };

3. 引入SVG：在TS文件中导入SVG图标。你可以将SVG文件放在`public/icons`或其他自定义路径，并通过变量引用：

   import Logo from '@/assets/svg/logo.svg'; // 使用绝对路径或相对路径
   const logoIcon = Logo as JSX.Element;

或者，如果你有预先转换成ts声明的图标库，可以直接导入：

   import Logo from '@/assets/icons/logo.tsx';

4. 在模板中使用：现在你可以在组件模板里直接使用这个SVG图标，像处理其他元素一样使用它：

   <div>
     <img :src="logoIcon" alt="Logo" />
   </div>

记得在`<script setup>`或`<template>`部分导出相应的类型，如`export default defineComponent({ components: { Logo } })`。