vue中 用 require 动态获取本地图片

在 Vue 中使用 `require` 动态获取本地图片，可以按照以下步骤：

1. 在 `src/assets` 目录下创建一个 `images` 文件夹，用于存放图片文件。

2. 将需要使用的图片文件放入 `src/assets/images` 文件夹中。

3. 在 Vue 组件中，使用 `require` 导入图片文件，例如：

   <template>
     <div>
       <img :src="require('@/assets/images/my-image.png')" alt="My Image">
     </div>
   </template>

注意：`require` 中的路径需要以 `@` 开头，表示使用 `src` 目录作为根路径。

4. 运行项目，在浏览器中查看，应该能够正常显示指定的图片。

相关问题

vue for循环时 使用require动态路径本地图片不存在怎么使用默认图片

可以在v-bind中使用三元表达式，判断当前图片是否存在，若不存在则使用默认图片路径。示例代码如下：

<template>
  <div>
    <div v-for="(item, index) in imgList" :key="index">
      <img :src="getImageUrl(item.imgUrl)" alt="图片">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgList: [
        { imgUrl: 'img1.png' },
        { imgUrl: 'img2.png' },
        { imgUrl: '' }
      ]
    }
  },
  methods: {
    getImageUrl(url) {
      try {
        return require(`@/assets/${url}`);
      } catch (error) {
        return require('@/assets/defaultImg.png');
      }
    }
  }
}
</script>

以上代码中，`getImageUrl`方法会尝试获取图片路径`require(`@/assets/${url}`)`，若图片不存在则会捕获异常，返回默认图片路径`require('@/assets/defaultImg.png')`。

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格式。