Question

我在项目中使用了照相馆组件。它需要包含图像的文件夹的路径。我找不到解决办法。我已经在img内创建了一个assets目录，并且使用的是标准Vue CLI 3脚手架。我可以使用require('path/to/file/name.png')，但我需要的是能够将整个文件夹放入。我无法找到一种方法来执行此操作。我什至尝试将图像放在public内的文件夹中，但是没有运气。

我的结构如下：

project/public/img
project/src/assets/img/
project/src/components/

我需要将project/src/assets/img路径放入project/src/components/componentName.vue内部的组件中。

我还应该提到，我希望能够从script标签而不是template标签访问此目录。

Answer 1

您可以尝试以下操作：

const requireModule = require.context('../assets/img.',false,/\.png$/)
const images = {}

requireModule.keys().forEach(filename => 
{
    const imageName = fileName.replace(/(\.\/|\.png)/g, '');
    images[imageName] = requireModule(fileName)

    OR

    images[imageName] = 
    {
        namespaced: true,
        ...requireModule(fileName)
    }
});

export default images;

然后您可以导入该文件

import photos from 'imagesObject.js'

for (let key in photos) // do whatever you want with the image

Answer 2

谢谢您的回答。该解决方案确实有效，但是我找到了另一个我想与其他有类似问题的人分享的解决方案。我遇到的问题是使用相对路径而不是BASE_URL错误地引用了公用文件夹。基于此... The public Folder Vue CLI Documentation

我在/ public内部创建了一个目录，然后使用process.env.BASE_URL对其进行了引用。这样就解决了问题。以下是相关片段：
Javascript：

data () {
        return {
            thumbnailDir : process.env.BASE_URL + 'portfolio/'
        }

模板：

<transition-group name="thumbnailfade" tag="div">
        <img v-for="thumb in filteredImages"
             :key="thumb.id"
             @click="showLightbox(thumb.name)"
             :src="thumbnailDir + thumb.name"
             :alt="thumb.alt"
             :title="thumb.alt"/>
    </transition-group>

    <lightbox id="mylightbox"
              ref="lightbox"
              :images="images"
              :directory="thumbnailDir"
              :filter="galleryFilter"
              :timeoutDuration="5000"
    />

如何将目录导入单个文件组件

2 个答案: