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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 2677 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

我目前有这样一个需求：

子组件中需要引入一个图片，而这个图片的引用路径由父组件通过 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，而非正确的路径。现在我该怎样才能实现父子件给值，子组件正确解析并引用图片的效果？求各位给个思路。

组件

imgpath

路径

JavaScript

11 条回复 • 2017-08-29 22:25:30 +08:00

jaylee77

2017-08-25 17:14:55 +08:00

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

ijse

2017-08-25 17:18:57 +08:00

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

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

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

varzy

2017-08-25 17:23:27 +08:00

@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

2017-08-25 17:25:28 +08:00

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

Dzinlife

2017-08-25 17:59:40 +08:00

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

varzy

2017-08-25 18:01:33 +08:00

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

leopku

2017-08-25 18:19:59 +08:00 via iPhone

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

varzy

2017-08-25 18:22:13 +08:00

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

ode

2017-08-29 17:51:32 +08:00

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

ode

2017-08-29 17:57:24 +08:00

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

varzy

2017-08-29 22:25:30 +08:00

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

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