图像 src 使用 vuejs 得到 404 错误答案

【问题标题】：image src get 404 error with vuejs图像 src 使用 vuejs 得到 404 错误
【发布时间】：2016-05-01 15:44:12
【问题描述】：

我是 vue.js 的新手，并尝试使用 v-for 指令呈现图像列表。相反，我得到the server responded with a status of 404 (Not Found)。我正在使用vue-cli生成的template。

webpack url-loader 应该把 item.src 对应的图片的 url 改成某种 [name].[ext]?[hash] 的格式，但它只是不管它们（实际上结果 url 是 http://localhost:8080/assets/computer.jpg ）。

这是我的代码：

<template>
  <h2 class="ui header">
		<div class="content">
			Recent Research
			<div class="sub header">
				recent research issue
			</div>
		</div>
	</h2>
  <div v-for="item in items" class="ui three column centered grid">
    <div class="column">
      <img class="ui centered medium image" :src="item.src" />
      <h3 class="ui header">{{item.text}}</h3>
      <p class="teal meta">{{item.extra}}</p>
    </div>
  </div>
</template>

<script>
  export
  default {
    data() {
      return {
        items: [{
            src: '../assets/computer.jpg',
            text: 'fundamentals of search engine',
            extra: 'with Google'
          }, {
            src: '../assets/computer.jpg',
            text: 'fundamentals of search engine',
            extra: 'with Google'
          }, {
            src: '../assets/computer.jpg',
            text: 'fundamentals of search engine',
            extra: 'with Google'
          }, {
            src: '../assets/computer.jpg',
            text: 'fundamentals of search engine',
            extra: 'with Google'
          }, {
            src: '../assets/computer.jpg',
            text: 'fundamentals of search engine',
            extra: 'with Google'
          }, {
            src: '../assets/computer.jpg',
            text: 'fundamentals of search engine',
            extra: 'with Google'
          },

        ]
      }
    }
  }
</script>

以及相关的 webpack 配置。

var path = require('path')

module.exports = {
  entry: {
    app: './src/main.js'
  },
  output: {
    path: path.resolve(__dirname, '../dist/static'),
    publicPath: '/static/',
    filename: '[name].js'
  },
  resolve: {
    extensions: ['', '.js', '.vue'],
    alias: {
      'src': path.resolve(__dirname, '../src')
    }
  },
  resolveLoader: {
    root: path.join(__dirname, 'node_modules'),
  },
  module: {
    loaders: [{
      test: /\.vue$/,
      loader: 'vue'
    }, {
      test: /\.js$/,
      loader: 'babel',
      exclude: /node_modules/
    }, {
      test: /\.json$/,
      loader: 'json'
    }, {
      test: /\.(png|jpg|gif|svg)$/,
      loader: 'url',
      query: {
        limit: 10000,
        name: '[name].[ext]?[hash]'
      }
    }]
  },
  vue: {
    loaders: {
      js: 'babel'
    }
  }
  /*
  eslint: {
    formatter: require('eslint-friendly-formatter')
  }
  */
}

【问题讨论】：

如果从图像返回 404 状态，然后检查请求的图像 url，如果错误，请相应地更改它，请注意 item.src 应该与您的域相关，而不是您当前的 .js 文件
请求地址正确。 webpack 的绑定过程可能有问题。 webpack url-loader 只保留 item.src 对应的 url（实际上结果 url 是一些 http://localhost:8080/assets/computer.jpg ），而它应该将 url 更改为一些 [name].[ext]?[hash] 格式。

标签： webpack vue.js

【解决方案1】：

您将一个字符串传递给 items 数组的 'src' 字段，webpack 无法判断该字符串是否是资源。

我建议您尝试将其更改为：

 items: [{
    src: require('../assets/computer.jpg'),
    text: 'fundamentals of search engine',
    extra: 'with Google'
  }, {    
....

这样输出可能会被 webpack 处理。

【讨论】：

如果您像我一样从 Google 登陆此页面：如果您使用 vue-cli 启动项目，并且正在使用 Airbnb ESLint，它会唠叨 global-require。把它关掉吧，这似乎是official solution，不管感觉有多脏。