My folder structure looks like this:
https://i.sstatic.net/dEhAN.png
Since my website is simple, I prefer using just a json file to feed data instead of requiring an administrator.
In my Cases.vue file, I have a v-for loop that iterates through my data/cases.json file, but I'm having trouble displaying the images referenced in the json!
This is the code snippet:
{
"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>These are my Cases.vue and cases.json files.
Can anyone help with correctly displaying the image in the
<img :src="case.logo" :alt="case.alt">The issue I'm facing shows the error:
1 GET http://localhost:8080/assets/images/cases/logos/empresa.png 404 (Not Found)The problem lies in not knowing the correct path for my assets image while working with webpack for the first time. I've attempted various paths but haven't been successful. The actual path is src/assets/images/cases/logos/logo.png, but I'm unsure how to locate it using webpack as a module bundler!
I hope someone can provide assistance!
Thank you in advance!!