最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Replacement for require in Vuejs 3 with Vite for image array - Stack Overflow

programmeradmin1浏览0评论

I'm currently switching to vite with vuejs and have the following problem:

I have a ponent in debugging that displays images from a folder:

imageArray: [
     require ("../ assets / dummies / Mission -1.jpg"),
     require ("../ assets / dummies / Mission -2.jpg"),
     require ("../ assets / dummies / Mission -3.jpg"),
     require ("../ assets / dummies / Mission -4.jpg")
]

in the ponent is the following div

<div: class = "bgClass" v-if = "isDebug () == true"> </div>

there is then the following dynamic class with de rich simple that can scroll through the images.

puted: {
     bgClass: function () {
      
       return {
           backgroundImage: 'url (' + this.imageArray [this.imagePos] + ')',
           ...
       }
     }
   }

Required is not available in Vite, and I would not like to convert the old vue2 ponents to the vue3 position API.

how can I simply load the images into an array and scroll through the ponent.

I'm currently switching to vite with vuejs and have the following problem:

I have a ponent in debugging that displays images from a folder:

imageArray: [
     require ("../ assets / dummies / Mission -1.jpg"),
     require ("../ assets / dummies / Mission -2.jpg"),
     require ("../ assets / dummies / Mission -3.jpg"),
     require ("../ assets / dummies / Mission -4.jpg")
]

in the ponent is the following div

<div: class = "bgClass" v-if = "isDebug () == true"> </div>

there is then the following dynamic class with de rich simple that can scroll through the images.

puted: {
     bgClass: function () {
      
       return {
           backgroundImage: 'url (' + this.imageArray [this.imagePos] + ')',
           ...
       }
     }
   }

Required is not available in Vite, and I would not like to convert the old vue2 ponents to the vue3 position API.

how can I simply load the images into an array and scroll through the ponent.

Share Improve this question edited Apr 18, 2022 at 18:29 Nikola Pavicevic 23.5k9 gold badges29 silver badges51 bronze badges asked Jan 5, 2022 at 10:13 bluelemonadebluelemonade 1,3052 gold badges17 silver badges34 bronze badges 1
  • Tried import()instead? – Anuga Commented Jan 5, 2022 at 10:23
Add a ment  | 

2 Answers 2

Reset to default 6

You can create function:

check vite docs

const useImage = ((url) => {
  return new URL(`/src/${url}`, import.meta.url).href;
});

and create global property (in main.js):

app.config.globalProperties.$image = useImage;

then use it like:

$image(imageUrl)

I started using Vite and had the same problem. I read other people's advice and experimented. Here's an example using v-for, in case it helps others.

<template>
    <div
        v-for="item in items"
        :key="item.id"
    >
        <img
            :src="`${imageUrl}${item.image}.jpg`"
            :alt="item.description"
        >
    </div>
</template>
<script>
export default {
    setup() {
        const imageUrl = new URL("../assets/images/", import.meta.url).href;
        return { imageUrl };
    },
    props: {
        items: {
            type: Object,
            default: function() {
                return {};
            },
        },
    },
};
</script>
发布评论

评论列表(0)

  1. 暂无评论