2
で生成：問題は、私は次のフォルダ構造を持っているVUE-CLI
を私のアプリケーションは単純であるので、私は私を回避するには、管理者は必要ありません。私はちょうどそれを養うためにjsonファイルを使用したい！
私のCases.vueファイルには、私のdata/cases.jsonファイルを反復するv-forがありますが、jsonが参照するimagensを印刷できません！
私のコードがあります：
{
"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>ものは私のCases.vueと私cases.jsonファイルです。
たとえば、タグ<img :src="case.logo" :alt="case.alt">の画像を正しく印刷する方法を知っていますか？
それは私がエラーを取得していているとおり：1 GET http://localhost:8080/assets/images/cases/logos/empresa.png 404 (Not Found)
問題は、私は初めてのWebPACKで働いているので、私は私の資産のイメージの実際のパスを知らないと私はこれを使用しておりませんメモリにロードされたコード/ファイルで作業すること！私はいくつかの道を試してみましたが、正しい経路を見つけようとしましたが、成功しませんでした実際のパスはsrc/assets/images/cases/logos/logo.pngですが、webpackをモジュールバンドラとして使用してコードを見つける方法はわかりません！
誰かが私を助けることを願っています！
ありがとうございます！