Problems with Assets from a JSON - Vuejs with Webpack

Question

Talk, you guys, baby?

Can anyone give me a help? I have the following folder structure:

As my application is simple, I am not doing anything connected to bank, I will directly consume a JSON file that will have the information to popular my screens!

In the case of my Cases.Vue file, I have a v-for that populates the information of my data/cases.json, but I’m not able to print the images from the information of that json, someone can help me?

{
  "cases": [{
    "behance": "https://www.globo.com",
    "bg_box": "bg_case_grandeshistorias",
    "logo": "./assets/images/cases/logos/uirapuru.png",
    "alt": "Colégio Uirapuru",
    "name": "Colégio Uirapuru",
    "description": "Grandes histórias começam aqui",
    "background": "../assets/images/cases/bg/grandeshistorias-bg.jpg"
  }, {
    "behance": "https://www.terra.com.br",
    "bg_box": "bg_case_building",
    "logo": "../assets/images/cases/logos/flir.png",
    "alt": "FLIR Systems",
    "name": "FLIR - Building Store",
    "description": "A melhor solução estrutural",
    "background": "../assets/images/cases/bg/building-bg.jpg"
  }]
}

<template>
  <div class="container-fluid p_top_header relative">
    <div style="" class="bg_cases"></div>
    <div class="row relative">
      <div class="col-xs-12 col-sm-6 col-md-4" v-for="case in records.cases">
        <a :href="case.behance" target="_blank" class="box_cases" data-bg="#case_pump">
          <div class="img_case" :class="case.bg_box"></div>
          <div class="content_cases">
            <div class="d_table h_full">
              <div class="d_table_cell">
                <img :src="case.logo" :alt="case.alt">
                <h4>{{ case.name }}</h4>
                <span>{{ case.description }}</span>
              </div>
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
  export
  default {
    name: 'Cases',
    data() {
      return {
        records: require('../data/cases.json')
      }
    }
  }
</script>

In this case this is my Cases.Vue file and my cases.json!

Does anyone know how to guide me to print the logo(<img :src="case.logo" :alt="case.alt">) for example?

As it stands it makes the following mistake: 1 GET http://localhost:8080/assets/images/cases/logos/empresa.png 404 (Not Found)

The problem is that I can’t definitely figure out the actual path of my image to put correctly in my json! But in my physical structure is in src/Assets/images/cases/logos/logo.png.

If anyone can help me I’d be grateful!

Thank you!

Answer 1

your cases.json is below src so it does not include it as part of the directory, where .. / moves up a level of the directory, then you have to take into account where you are consuming your json ... if you are consuming from a higher index than src include it ... as would be the case for example if it were running in the root directory or in another directory branch.

to test if the directory matches

testa "localhost" + /src/Assets/images/cases/bg/case.logo in browser to appear the image, if you put the whole url works, but it is not very usual. simply cut the initial part according to the folder where the script is running ... remembering that if it is in a different branch you must go up to the branch where it is in the path again using .. / once for each directory and continue the rest of the directory normally. I hope you were able to explain ;)