在学习vue的过程中,我发现一个问题如下:
引用图片的时候,用以下方式完全没问题:
![](../assets/goods1.png)
但是,将图片路径写在js里面就不行了,如下:
![](item.path)
export default {
name: 'allList',
data () {
return {
item: {
path: './../assets/goods1.png',
name: '普洱茶',
price: '$100'
}
}
}
}
最终解决方法为:
- 使用import或require引入图片资源,如下为使用import引入:
import path1 from './../assets/goods1.png'
export default {
name: 'allList',
data () {
return {
item: {
path: path1,
name: '普洱茶',
price: '$100'
}
}
}
}
- 也可以将图片放入外面的static文件夹内,然后:
export default {
name: 'allList',
data () {
return {
item: {
path: './.../static/goods1.png',
name: '普洱茶',
price: '$100'
}
}
}
}
最后成功解决问题!
网友评论