Question

我正在使用Vue.js，尝试从json文件中显示本地图像失败。

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

<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

[
  {
    "id": 1,
    "title": "Example of story title",
    "author": "Author Name",
    "cover": "../assets/img/covers/Blue-border-cover.png",
    "frequency": "weekly"
  },
  {
  ...
  }
]

其他数据正确显示，但封面图像不正确。我一直在寻找不同的解决方案，但似乎没有任何效果。如果直接在Stories.vue脚本中获取数据，图像将正确加载，如下所示：

data () {
    return {
      stories: [
        {
          ...
          cover: require('../assets/img/covers/Blue-border-cover.png')
        },

这是相关的文件夹结构：

src
├─ assets
│   ├─ data
│   │   └─ StoriesData.json
│   └─ img
│       └─ covers
│           └─ Blue-border-cover.png
├─ components
│   └─ EpisodeTyle.vue
└─ views
    └─ Episodes.vue

我在做什么错了？

Answer 1

在这里收到输入后，我尝试了不同的解决方案，发现了一个非常简单的解决方案。

问题是图像需要使用require。因此在StoryTile.vue中，我替换为：

[[Sun, 30 Dec 2018 15:03:55 UTC +00:00, 4305],
[Sun, 30 Dec 2018 15:05:42 UTC +00:00, 4305],
[Mon, 31 Dec 2018 09:24:06 UTC +00:00, 4306],
[Sat, 05 Jan 2019 09:04:50 UTC +00:00, 4308],
[Tue, 01 Jan 2019 11:26:04 UTC +00:00, 4306],
[Wed, 02 Jan 2019 17:24:19 UTC +00:00, 4305]]

具有：

v-bind:style="{ 'background-image': 'url(' + story.cover + ')' }"

还在json文件中，“ cover”：“ Blue-border-cover.png”，而不是现在在StoryTile.vue中表示的整个路径。

这成功了！

Answer 2

尝试通过这种方式做到这一点：

const images = require.context('@/assets/img/covers', false, /\.png$|\.jpg$/)

export default {
  ...
  methods: {
    loadImg(imgPath) {
      return images('./' + imgPath)
    },
    ...
  }

}

在您的模板中：

<div class="story-cover-img"
     :style="`background-image: url(${loadImg(story.cover)})`"
     :alt="story.title"></div>

在.json

[
  {
    "id": 1,
    "title": "Example of story title",
    "author": "Author Name",
    "cover": "Blue-border-cover.png", // only name of a file
    "frequency": "weekly"
  },
  {
  ...
  }
]

让我知道它是否有效。

另一个想法： .json

[
  {
    "id": 1,
    "title": "Example of story title",
    "author": "Author Name",
    "cover": "url(\'/assets/img/covers/Blue-border-cover.png\')", // set bg url here
    "frequency": "weekly"
  },
  {
  ...
  }
]

然后在您的模板中：

<div class="story-cover-img"
     :style="`background-image: ${story.cover}`"
     :alt="story.title"></div>

让我知道是否可行

如何使Vue从json文件的本地路径显示图像

2 个答案: