javascript - 查找我使用 vue-cli 生成的 Webpack-simple 和 Vuejs 图像的问题

Question

我有以下文件夹结构:

由于我的应用程序很简单，我不需要管理员来处理我的网站，所以我只想使用一个 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)

问题是我不知道 Assets 图像的真实路径，因为我是第一次使用 webpack，而且我不习惯处理加载到内存中的代码/文件!我尝试了几条路径试图找到正确的路径但没有成功!真正的路径是 src/assets/images/cases/logos/logo.png 但我不知道如何使用 webpack 作为模块打包器通过代码找到它!

希望有人能帮助我!

提前致谢!

Answer 1

因为 json-loader 不寻找路径(而且不能，因为 JSON 本身没有定义 Assets 路径的特殊语法，与任何其他普通字符串相反，webpack 无法识别)，webpack 不处理你的 / Assets 。

因为据 webpack 所知，它从您的入口文件解析的所有 JS 中都没有引用 /assets 中的任何文件。

如果您改为在 CSS 中引用其中一个资源，webpack 的 css 加载器会识别，将资源复制到 /dist 文件夹并相应地更改路径。

解决方案可能是添加 copy-webpack-plugin