vue3动态引入本地图片地址

在Vue3中，动态引入本地图片地址通常通过`v-bind`指令结合`require.context`或`img`标签的`src`属性的动态绑定来实现。以下是两种常见的方法：

1. 使用`require.context`：

<template>
  <div>
    <img :src="getLocalImageSrc('path/to/image.jpg')">
  </div>
</template>

<script setup>
import { ref } from 'vue';
const images = require.context('@/assets/images', true, /\.jpg$/);
const localImageSrc = ref('');

function getLocalImageSrc(filePath) {
  return images(filePath)?.default || '';
}
</script>

在这个例子中，`images`是一个上下文对象，可以获取到指定目录下所有`.jpg`文件的路径。`getLocalImageSrc`函数接收文件路径作为参数，返回实际的图片URL。

2. 直接使用`img`标签的动态绑定：

<template>
  <img :src="localImageSrc.value" />
</template>

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

const localImagePath = '/path/to/image.jpg'; // 本地图片路径
const localImageSrc = ref(`file://${localImagePath}`);
</script>

这里直接将本地路径转换为`data:` URL格式。