我正在尝试将图像文件从public/images
文件夹中的父文件夹导入到组件(Categories.vue
)中,但是图像没有显示。
这是文件夹结构:
这是代码:
<template>
<div class="container">
<div class="row">
<div v-for="item in items" :key="item.name" class="col-lg-3 col-md-3">
<div class="img-container">
<img v-bind:src="item.src" alt="" class="img-fluid">
<p class="text-dark"> {{ item.subtitle }} </p>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{
name:'first',
src:'./public/images/anubis.png',
subtitle: 'Anubis'
},
{
name:'second',
src:'public/images/sarcophagus.png',
subtitle: 'Sarcophagus'
},
{
name:'third',
src:'public/images/ra.png',
subtitle: 'Ra'
},
{
name:'fourth',
src:'public/images/eye-of-ra.png',
subtitle: 'Eyes of Ra'
}
]
}
}
}
</script>
我很确定自己做对了所有事情。我尝试使用require()
,但也失败了。我该如何解决这个问题?
答案 0 :(得分:1)
您需要做的就是替换变量
src:'./ public / images / anubis.png'
与
src:'/ images / anubis.png',
这将在所有实例中自动链接到您的公用文件夹。
答案 1 :(得分:0)
您需要从src/assets
文件夹中提供静态资产,以便Webpack可以看到图像,因此您需要将src / assets中的images文件夹放置在中,之后您就可以这样做了; < / p>
<template>
<div v-for="(image, index) in images" :key='index'>
<img :src='require(`@/assets/${image.src}`)' />
<p class="text-dark"> {{ image.subtitle }} </p>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
images: [
{
name:'second',
src:'images/sarcophagus.png',
subtitle: 'Sarcophagus'
},
{
name:'third',
src:'images/ra.png',
subtitle: 'Ra'
}
]
}
}
</script>
答案 2 :(得分:0)
问题是您的src
URL的前缀不正确是public/
。对于基于public
目录的URL,前缀实际上应该是process.env.BASE_URL
中的public path(默认为/
)
export default {
data() {
return {
items: [
{
src: `${process.env.BASE_URL}images/anubis.png`,
},
{
src: `${process.env.BASE_URL}images/sarcophagus.png`,
},
{
src: `${process.env.BASE_URL}images/ra.png`,
},
{
src: `${process.env.BASE_URL}images/eye-of-ra.png`,
}
]
}
}
}
请注意,public
directory是作为last resort提供的。 Vue文档建议将资产放在src/assets
下以实现最佳构建(即,只会缩小引用的图像并将其包含在构建中)。假设您使用src/assets/images
包含图片,则src
的网址为:
export default {
data() {
return {
items: [
{
src: require('@/assets/images/anubis.png'),
},
{
src: require('@/assets/images/sarcophagus.png'),
},
{
src: require('@/assets/images/ra.png'),
},
{
src: require('@/assets/images/eye-of-ra.png'),
}
]
}
}
}