我具有以下文件夹结构:
因为我的应用程序很简单,所以不需要管理员来处理我的网站,所以我只想使用一个json文件来提供它!
在我的Cases.vue文件中,我有一个v-for,它在我的data / cases.json文件中进行迭代,但是我无法打印json所引用的图像!
有我的代码:
{
"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作为模块捆绑器通过代码找到它!
希望可以有人帮帮我!
提前致谢!!
由于json-loader不会查找路径(并且不能,因为JSON本身没有定义资产路径的特殊语法,因此webpack不能识别其他任何普通字符串),因此webpack不会处理您的/assets
。
因为就webpack而言,从入口文件中解析出来的所有JS中都没有任何地方/assets
引用了其中的任何文件。
如果您改为在CSS中引用这些资产之一,则webpack的css加载器将识别出该资产,将其复制到/dist
文件夹中并相应地更改路径。
一个解决方案可能是添加copy-webpack-plugin
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句