如何使Vue从json文件的本地路径显示图像 [英] How to make Vue display an image from a local path from json file
问题描述
我正在使用Vue.js,尝试从json文件中显示本地图像失败.
I'm playing with Vue.js and trying to display a local image from a json file unsuccessfully.
Stories.vue
Stories.vue
<template>
<div class="container col-md-5">
<div class="Library-title">
<div class="app-name">Stories List</div>
</div>
<story-tyle v-for="story in stories" v-bind:story="story" :key="story.id"></story-tyle>
</div>
</template>
<script>
import StoryTyle from '@/components/StoryTyle.vue'
import storyData from '@/assets/data/StoriesData.json'
export default {
name: 'Stories',
components: {
StoryTyle
},
data () {
return {
stories: storyData
}
}
}
</script>
StoryTile.vue
StoryTile.vue
<template>
<div class="story-wrapper col-6">
<div class="story-cover">
<div class="story-cover-img" v-bind:style="{ 'background-image': 'url(' + story.cover + ')' }" v-bind:alt="story.title">
<a v-on:click="nextPath()">
<div class="story-details cover-select">
<span v-if="story.frequency" class="story-frequency resize">{{ story.frequency }}</span>
<div class="story-title resize">{{ story.title }}</div>
<div class="story-author resize">{{ story.author }}</div>
</div>
</a>
</div>
</div>
</div>
</template>
<script>
export default {
import: require('../assets/js/resize.js'),
props: ['story'],
name: 'story-tyle',
methods: {
nextPath () {
if (this.story.frequency) {
this.$router.push({name: 'Episodes'})
} else {
this.$router.push({name: 'Read'})
}
}
}
}
</script>
StoriesData.json
StoriesData.json
[
{
"id": 1,
"title": "Example of story title",
"author": "Author Name",
"cover": "../assets/img/covers/Blue-border-cover.png",
"frequency": "weekly"
},
{
...
}
]
其他数据正确显示,但封面图像不正确. 我一直在寻找不同的解决方案,但似乎没有任何效果. 如果直接在Stories.vue脚本中获取数据,图像将正确加载,如下所示:
The other data display correctly, but not the cover image. I've looked for different solutions but nothing seems to work. Images loads correctly if I get the data directly in the script of Stories.vue like this:
data () {
return {
stories: [
{
...
cover: require('../assets/img/covers/Blue-border-cover.png')
},
这是相关的文件夹结构:
And this is the relevant folder structure:
src
├─ assets
│ ├─ data
│ │ └─ StoriesData.json
│ └─ img
│ └─ covers
│ └─ Blue-border-cover.png
├─ components
│ └─ EpisodeTyle.vue
└─ views
└─ Episodes.vue
我在做什么错了?
推荐答案
在这里收到输入后,我尝试了不同的解决方案,并找到了一个非常简单的解决方案.
After the input received in here, I played around with different solution and found a very simple solution that worked.
问题是图像需要使用require.因此,在StoryTile.vue中,我替换为:
The problem is that images need to use require. So in StoryTile.vue I replaced:
v-bind:style="{ 'background-image': 'url(' + story.cover + ')' }"
具有:
v-bind:style="{ 'background-image': 'url(' + require('../assets/img/covers/' + story.cover) + ')' }"
也在json文件中,"cover":"Blue-border-cover.png",而不是现在在StoryTile.vue中表示的整个路径.
also in the json file, "cover": "Blue-border-cover.png" and not the entire path which is now expresses in StoryTile.vue.
这成功了!
这篇关于如何使Vue从json文件的本地路径显示图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!