
题目有些乱。。。请原谅理科生的表达功底。
我目前有这样一个需求:
子组件中需要引入一个图片,而这个图片的引用路径由父组件通过 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 一下 |