英文:
vue @/src/assets/images/1.jpg: hasn't been transpiled yet error
问题
I'm getting this error - vue @/src/assets/images/1.jpg: hasn't been transpiled yet error. I'm looping through the App component static array. The src is specified correctly though. Using require vue method.
我遇到了这个错误 - vue @/src/assets/images/1.jpg: 还没有被转译的错误。我正在循环遍历 App 组件的静态数组。虽然 src 已经正确指定了。我正在使用 require vue 方法。
英文:
**I'm getting this error - vue @/src/assets/images/1.jpg: hasn't been transpiled yet error. I'm looping through tha App component static array. The src is specified correctly though. Using require vue method.
https://codesandbox.io/s/eloquent-grass-j1usw8?file=/src/components/v-carousel-item.vue
**
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
// APP
<template>
<v-carousel :carousel_data="sliderItems" />
</template>
<script>
import vCarousel from "./components/v-carousel.vue";
export default {
name: "App",
data() {
return {
sliderItems: [
{ id: 1, name: "img1", img: "1.jpg" },
{ id: 2, name: "img2", img: "2.jpg" },
{ id: 3, name: "img3", img: "3.jpg" },
],
};
},
components: {
vCarousel,
},
};
</script>
// Parent
<template>
<div class="container">
<div class="v-carousel">
<v-carousel-item
v-for="item in carousel_data"
:key="item.id"
:item_data="item"
/>
</div>
</div>
</template>
<script>
import vCarouselItem from "./v-carousel-item.vue";
export default {
components: {
vCarouselItem,
},
props: {
carousel_data: {
type: Array,
default: () => [],
},
},
};
</script>
// Child
<template>
<div class="v-carousel-item">
<img :src="require(`../assets/images/` + item_data.img)" alt="" />
</div>
</template>
<script>
export default {
props: {
item_data: {
type: Object,
default: () => {},
},
},
};
</script>
<!-- end snippet -->
答案1
得分: 0
你想要提前加载这些图片。
export default {
name: "App",
data() {
return {
sliderItems: [
{ id: 1, name: "img1", img: require("@/assets/images/1.jpg") },
{ id: 2, name: "img2", img: require("@/assets/images/2.jpg") },
{ id: 3, name: "img3", img: require("@/assets/images/3.jpg") },
],
};
},
然后更新轮播项目组件。
<div class="v-carousel-item">
<img :src="item_data.img" alt="" />
</div>
示例: 链接
英文:
You want to require the images upfront.
export default {
name: "App",
data() {
return {
sliderItems: [
{ id: 1, name: "img1", img: require("@/assets/images/1.jpg") },
{ id: 2, name: "img2", img: require("@/assets/images/2.jpg") },
{ id: 3, name: "img3", img: require("@/assets/images/3.jpg") },
],
};
},
Then update the carousel item component.
<div class="v-carousel-item">
<img :src="item_data.img" alt="" />
</div>
Example: https://codesandbox.io/s/little-bush-ino5zc?file=/src/components/v-carousel-item.vue:11-91
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论