Problems with assets coming from a JSON - Vuejs with Webpack

Question

Problems with assets coming from a JSON - Vuejs with Webpack

Navigation

#1 by (0 votes)

1

Talk about people, beauty?

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

Asmyapplicationissimple,I'mnotdoinganythingconnectedtothebank,I'lldirectlyconsumeaJSONfilethatwillhavetheinformationtopopulatemyscreens!

IncaseofmyCases.vuefile,Ihaveav-forthatpopulatestheinformationofmydate/cases.json,howeverIamnotabletoprinttheimagesfromtheinformationofthisjson,cananyonehelpme?

{
  "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 case this is my Cases.vue file and my cases.json!

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

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

The problem is that I can not definitively figure out the actual path of my image to put correctly in my json! But in my physical structure it is in src / assets / images / cases / logos / logo.png.

If anyone can help me I would be grateful!

Thank you!

javascript vue.js

asked by anonymous 12.07.2016 / 07:51

1 answer

Animate activity in a circular way How to count underage employees?

score 0 · Answer 1

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

to test whether the directory matches

test "localhost" + /src/assets/images/cases/bg/case.logo in the browser to appear the image, if you put the whole url works, however is not very usual. just 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 that is in the path again using ../ once for each directory and continue the rest of the directory normally. I hope you have been able to explain;)