Search code examples
javascriptjsonwebpackassetsvue.js

Issue to find my images Webpack-simple and Vuejs generated with vue-cli

I have the following folders structure:

inserir a descrição da imagem aqui

As my application is simple I don't need an administrator to work around my website so I want to use just a json file to feed it!

On my Cases.vue file I have a v-for that iterates on my data/cases.json file but I can't print the imagens referenced by the json!

There is my code:

{
  "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>

Those are my Cases.vue and my cases.json files.

Does someone knows how to print properly the image on the tag <img :src="case.logo" :alt="case.alt"> for example?

As it is I am getting the error: 1 GET http://localhost:8080/assets/images/cases/logos/empresa.png 404 (Not Found)

The problem is I don't know the real path of my assets image since I am working with webpack for the first time and I am not used with this thing of working with code/files loaded on the memory! I've tried a few paths trying to find the correct one but not successfully! The real path is src/assets/images/cases/logos/logo.png but I don't know how to find it through code with webpack as module bundler!

Hope someone can help me!

Thanks in advance!!

Solution

  • Since json-loader does not look for paths (and can't, because JSON itself has not special syntax that defines assets paths, as opposed to any other ordinary string, for webpack to recognize), webpack does not process your /assets.

    Because as far as webpack can tell, nowhere in all of the JS it has parsed from your entry file, any of those files in /assets have been referenced.

    If you instead referenced one of those assets in CSS, webpack's css loader would recognize that, copy the asset over to the /dist folder and change the path accordingly.

    A solution might be to add the copy-webpack-plugin