vue使用本地json

Posted 2023-05-04

参考技术A 1：在static文件夹底下新建json文件，（ 本地JSON文件一定要需放在static文件夹之下。）

访问服务器文件，应该把 json文件放在最外层的static文件夹，这个文件夹是vue-cli内置服务器向外暴露的静态文件夹。

2：写一个axios

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

【中文标题】如何使Vue显示来自json文件的本地路径的图像

【英文标题】：How to make Vue display an image from a local path from json file

【发布时间】：2019-07-10 17:11:01

【问题描述】：

我正在使用 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:>
        <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

我做错了什么？

【问题讨论】：

url() 函数接受相对于其位置的路径。你能分享你的文件夹结构吗？

Vue.js dynamic images not working的可能重复

@Sumurai8，您的链接不能解决问题。我的问题是当我将路径放入 json 文件时。

我的意思是 - 你能显示目录树吗？

@Efrat 我现在已将文件夹结构添加到问题中。

【参考方案1】：

尝试这样做：

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))`"
     :></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`"
     :></div>

让我知道这是否有效?

【讨论】：

它没有工作，这次没有显示来自json的其他内容。我认为问题出在 $loadImg(story.cover) 上。也试过 loadImg(story.cover) 具有相同的结果。注意我已经将 const 和方法放在 Stories.vue 中，我返回 json 数据。

您可能需要修改 json 文件中的路径以仅包含文件名。毕竟，上下文已经包含了整个路径。遗憾的是codesandbox不支持require.context，所以我不能在那里创建一个例子。

哦，是的，我忘了。 @Sumurai8 是对的。由于您在require images 中提供路径，您只需将文件名放入.json 文件中；-)

关于文件的名称，我已经这样做了，但它仍然不起作用。我正在尝试使用 codepen，很快就会发布。

@AdamOrlov，感谢您的输入，我找到了一个非常简单的解决方案。我已将其发布为答案。

【参考方案2】：

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

问题是图片需要使用require。所以在 StoryTile.vue 我替换了：

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 中表达的整个路径。

这成功了！

【讨论】：

感谢您发布后续内容 - 在 v-bind 中使用 require() 解决了我遇到的相同问题。