题目有些乱。。。请原谅理科生的表达功底。
我目前有这样一个需求:
子组件中需要引入一个图片,而这个图片的引用路径由父组件通过 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
,而非正确的路径。现在我该怎样才能实现父子件给值,子组件正确解析并引用图片的效果?求各位给个思路。
1
jaylee77 2017-08-25 17:14:55 +08:00
~assets/crowd.png 这是一个正常的路径?
|
2
ijse 2017-08-25 17:18:57 +08:00
既然用了 Webpack, 就把图片当作 资源,而非路径 处理
data 中: myImg: require('~assets/crowd.png') 然后 <index-card :imgPath="myImg"></index-card> |
3
varzy OP @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' |
4
varzy OP @jaylee77 是的。请看这的 “ URL 解析” 一节: https://lvyongbo.gitbooks.io/vuejs-templates/content/static.html
|
5
Dzinlife 2017-08-25 17:59:40 +08:00
报错是你没装对应的 loader,请使用 url-loader 或 file-loader
|
7
leopku 2017-08-25 18:19:59 +08:00 via iPhone
你这表达那里理科了?分明是文科生的!
|
9
ode 2017-08-29 17:51:32 +08:00
和你遇到一样的问题 搜索过来的 楼主解决了么
|
10
ode 2017-08-29 17:57:24 +08:00
解决了 子组件内把图片手动 require 一下
|