vue-cli 中一个关于父子件图片路径传值的问题

[varzy]

题目有些乱。。。请原谅理科生的表达功底。

我目前有这样一个需求：

子组件中需要引入一个图片，而这个图片的引用路径由父组件通过 props 传入。目前子组件确实可以接收到这个路径值，但不会被解析成正确的路径。网上找了一通也没有找到相关的问题。

主要代码如下：

父组件：

<index-card imgPath="~assets/crowd.png"></index-card>

子组件：

<template>
  <div>
    <img :src="imgPath">
  </div>
</template>


<script>
  export default {
    props: {
      'imgPath': {
        type: String
      }
    }
  }
</script>

webpack.base.conf.js:

alias: {
    'vue$': 'vue/dist/vue.esm.js',
    '@': resolve('src'),
    'assets': resolve('src/assets')
}

通过打印可以得到 imgPath 的值就是 ~assets/crowd.png，而非正确的路径。现在我该怎样才能实现父子件给值，子组件正确解析并引用图片的效果？求各位给个思路。

[jaylee77]

~assets/crowd.png 这是一个正常的路径？

[ijse]

既然用了 Webpack, 就把图片当作 资源，而非路径 处理

data 中：
myImg: require('~assets/crowd.png')

然后
<index-card :imgPath="myImg"></index-card>

[varzy]

@ijse 其实我尝试过这样的写法，但这样写会直接报错：

in ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/xxx/index.vue
Module not found: Error: Can't resolve '~/asset/crowd.png' in 'D:\CodeHub\xxx\src\components\xxx'

[varzy]

@jaylee77 是的。请看这的 “ URL 解析” 一节： https://lvyongbo.gitbooks.io/vuejs-templates/content/static.html

[Dzinlife]

报错是你没装对应的 loader，请使用 url-loader 或 file-loader

[varzy]

@Dzinlife hi, 我这边使用的是 vue-cli，是带有这两个 loader 并且已经配置好的

[leopku]

你这表达那里理科了？分明是文科生的！

[varzy]

@leopku 关注问题本身啊老哥。我都快要纠结死了 (╯°Д°)╯︵ ┻━┻

[ode]

和你遇到一样的问题 搜索过来的 楼主解决了么

[ode]

解决了 子组件内把图片手动 require 一下

[varzy]

@ode 我这边也解决了。解决方案如二楼所说，只不过写法并不是 require('~/xxx.png'), 因为 ~ + 路径 这种写法是用在 template 中的。如果 require 的话，写图片的路径即可。比如我的就是 require('@/assets/xxx.png')。

不过我很好奇，你在子组件中直接 require 图片，那如果想更换图片怎么办？父组件不是不能控制了吗？