链接到 Vue.js 中 vuex 存储中引用的图像 [英] Linking to images referenced in vuex store in Vue.js
问题描述
我是第一次使用 Vue.js 如果这是一个基本问题,我很抱歉 - 我已经使用 vue-cli、vue-router设置了 vue 项目strong> 和 vuex 如果此信息有帮助.
我在这里的主要问题是显示图像或访问资产.我能够通过getter"从数据存储中提取适当的数据/状态并在其中迭代数组等(例如,{{student.name}}
工作得很好)但是当我尝试使用 <img :src='student.image'>
显示图像,但它无法加载,并且我得到一个断开的链接图标.我做了一些研究,似乎有一个 webpack 命名约定用于将资产与 ~/
或 ~@/
链接,但是这些似乎都不起作用.
我见过其他示例,其中人们只是从组件链接到固定资产,但因为我正在迭代 students
数组,所以我需要一种更具编程性的方法.我看过一些使用 computed()
属性的例子,但我觉得这应该是不必要的?
以下是我的组件中的代码以及我的 store.js
文件的相关部分.
Store.js:
从'vue'导入Vue从 'vuex' 导入 VuexVue.use(Vuex)导出默认新 Vuex.Store({状态: {用户:{得分:0},学生们: [{编号:1,name: 'Advik',年龄:'19',学习:物理治疗",图像:'~/assets/images/students/advik-1.png'},{编号:2,name: '杰克',年龄:'19',学习:戏剧",图像:'~/assets/images/students/jake-1.png'},{编号:3,name: '梅尔',年龄:'20',学习:土木工程",图像:'~/assets/images/students/mel-1.png'},{编号:4,name: 'Kaya',年龄:'18',学习:'法律',图像:'~/assets/images/students/kaya-1.png'}]},突变:{},方法: {},吸气剂:{getStudents:状态 =>学生},动作:{}})
介绍组件:
<模板><div><div class="m-background"></div><品牌/><div class="l-container"><div v-for="student in getStudents":key="student.id"><router-link class="m-btn m-btn--left m-btn__primary":to="{ name: 'home' }">{{ student.name }}</路由器链接>
模板><脚本>从 'vuex' 导入 { mapGetters }从../../components/Brand"导入品牌导出默认{成分: {牌},计算:{...mapGetters(['getStudents'])},名称:'介绍'}<风格></风格>
非常感谢!
:src='student.image'
(v-binding) 在运行时执行,但 webpack 别名在编译时工作.所以你必须在require
中包装别名文件路径.
<代码>{编号:1,name: 'Advik',年龄:'19',学习:物理治疗",图像:需要('~@/assets/images/students/advik-1.png')}
I am using Vue.js for the first time so apologies if this is a basic question – I have set up the vue project with the vue-cli, vue-router and vuex if this information is helpful.
My main issue here is with displaying images or accessing assets. I am able to pull the appropriate data/state in from a data store via a 'getter' and iterate arrays, etc within it (for example, {{student.name}}
works perfectly) however when I attempt to display an image with <img :src='student.image'>
it fails to load and I get a broken link icon. I've done some research and it seems that there is a webpack naming convention for linking assets with ~/
or ~@/
however neither of these seem to work.
I've seen other examples where people simply link to a fixed asset from the component but because I am iterating the students
array I need a more programmatic method. I've seen some examples using computed()
properties but I feel like this should be unnecessary?
Below is the code from my component and the relevant parts of my store.js
file.
Store.js:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
user: {
score: 0
},
students: [
{
id: 1,
name: 'Advik',
age: '19',
studying: 'Physiotherapy',
image: '~/assets/images/students/advik-1.png'
},
{
id: 2,
name: 'Jake',
age: '19',
studying: 'Drama',
image: '~/assets/images/students/jake-1.png'
},
{
id: 3,
name: 'Mel',
age: '20',
studying: 'Civil Engineering',
image: '~/assets/images/students/mel-1.png'
},
{
id: 4,
name: 'Kaya',
age: '18',
studying: 'Law',
image: '~/assets/images/students/kaya-1.png'
}
]
},
mutations: {
},
methods: {
},
getters: {
getStudents: state => state.students
},
actions: {
}
})
Intros component:
<template>
<div>
<div class="m-background"></div>
<Brand />
<div class="l-container">
<div v-for="student in getStudents"
:key="student.id">
<img :src='student.image'>
<router-link class="m-btn m-btn--left m-btn__primary"
:to="{ name: 'home' }">{{ student.name }}
</router-link>
</div>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import Brand from '../../components/Brand'
export default {
components: {
Brand
},
computed: {
...mapGetters(['getStudents'])
},
name: 'Intros'
}
</script>
<style>
</style>
Thank you so much!
:src='student.image'
(v-binding) is executed at runtime, but webpack aliases work in compile time. So you have to wrap the aliased file path in require
.
{
id: 1,
name: 'Advik',
age: '19',
studying: 'Physiotherapy',
image: require('~@/assets/images/students/advik-1.png')
}
这篇关于链接到 Vue.js 中 vuex 存储中引用的图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!