尝试在 v-for 中的 assets/img 文件夹中加载图像，但图像未加载

Question

我正在尝试使用 div 中的 v-for 将图像加载到我的 vue3 项目的 assets/img 文件夹中，但它们没有加载，只是显示我的 alt . 所以，我有一个 vue 组件，它将显示标题和段落以及图像。图片位于 assets/img 文件夹中，我正在使用我创建的商店获取图片的路径。当我尝试像这样放置图像的路径时：src="../assets/img/img2.jpg" 图像呈现。

这是我在 store.js 中的状态之一：

content: [
            {
                headline: 'Teste',
                paragraph: 'this is a paragraph',
                img: '@/assets/img/img.jpg'
            },]

这是我使用 v-for:

的模板

<template>
  <div>
    <div
      class="slider"
      v-for="item, i in content"
      :key='i'
    >
      <h1>{{item.headline}}</h1>
      <p>{{item.paragraph}}</p>
      <img
        :src="item.img"
        alt="test"
      />
    </div>
  </div>
</template>

我的设置：

 setup () {
    const store = useStore()
    const content = store.getters.getContent

    return { content }

  }

我尝试使用 :src="require(item.img)" 但这样做时出现了 webpack 错误：

Uncaught Error: Cannot find module '@/assets/img/img.jpg' webpackEmptyContext components sync:2

也尝试在 src 中指向图像的文件夹，:src="@/assets/img + item.img"，但没有成功。

Answer 1

我以前遇到过这个问题。也许下面的代码可以帮到你。

// create a function in util.js
export const getSrc = ( name ) => {
   
  const path = `/src/assets/img/${name}`
  
  const modules = import.meta.globEager('/src/assets/img/*.jpg')

  return modules[path].default
}

// use getSrc in someItem.vue
import { getSrc } from '@/util/util.js'

content: [
   {
     headline: 'Teste',
     paragraph: 'this is a paragraph',
     img: getSrc('img.jpg')
   }
]

尝试在 v-for 中的 assets/img 文件夹中加载图像，但图像未加载

Trying to load an image inside a assets/img folder in a v-for, but the images does not load

vuex

vuejs3