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

Posted 2023-02-22

【中文标题】查找我使用 vue-cli 生成的图像 Webpack-simple 和 Vuejs 的问题

【英文标题】：Issue to find my images Webpack-simple and Vuejs generated with vue-cli

【发布时间】：2016-11-14 05:36:03

【问题描述】：

我有以下文件夹结构：

由于我的应用程序很简单，我不需要管理员来处理我的网站，所以我只想使用一个 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" :>
                <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 和我的 case.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 作为模块捆绑器的代码找到它！

希望有人可以帮助我！

提前致谢！！

【参考方案1】：

由于 json-loader 不查找路径（也不能，因为 JSON 本身没有定义资产路径的特殊语法，而不是任何其他普通字符串，以便 webpack 识别），webpack 不会处理您的 @ 987654322@.

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

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

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