动态图像加载在 Vue 项目中不起作用！在没有动态的情况下，一切加载正确

Answer 1

问题可能与您引用图像路径的方式有关。您需要使用“require”来使用动态路径。

<template>
  <div class="row">
    <div v-for="(page, index) in paginatedImages" :key="index" class="col-lg-4 col-md-6">
      <div class="single-gallery">
        <img :src="require(page.path)" :alt="page.alt">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Gallery',
  data() {
    return {
      galleryImages: [
        {
          path: require('@/assets/images/services/whitening/whitening1.png'),
          alt: 'Description of the image'
        },
        {
          path: require('@/assets/images/services/all6/all63.png'),
          alt: 'Description of the image'
        },
        // Add other images with categories
      ],
    };
  }
}
</script>

Answer 2

我发现您当前的代码存在一个问题。 “路径”必须是一个 URL。不是文件路径。我不知道你正在使用什么捆绑程序，但如果你使用的是 vite 例如： https://vitejs.dev/guide/assets。 还应该与其他捆绑程序类似地合作。

一般有3种方式：

1. 您可以直接导入资源。

import imgUrl from './img.png'
document.getElementById('hero-img').src = imgUrl

2. 您可以使用公共目录中的资产。

请注意：您应该始终使用根绝对路径引用公共资源 - 例如，public/icon.png 应在源代码中引用为 /icon.png。 公共资产无法从 JavaScript 导入。

3. 使用新网址

const imgUrl = new URL('./img.png', import.meta.url).href

document.getElementById('hero-img').src = imgUrl

我认为就你的情况而言，使用选项 3 是最佳的。