我有一个案例,在我Vue.js的webpack网络应用程序中,我需要显示动态图像.我想显示img图像的文件名存储在变量中的哪个位置.该变量是一个computed返回Vuex存储变量的属性,该变量正在异步填充beforeMount.
<div class="col-lg-2" v-for="pic in pics">
<img v-bind:src="'../assets/' + pic + '.png'" v-bind:alt="pic">
</div>
然而,当我这样做时它完美地工作:
<img src="../assets/dog.png" alt="dog">
我的情况类似于这个小提琴,但这里它适用于img URL,但在我的实际文件路径中,它不起作用.
什么应该是正确的方法呢？
我使用 Vue-CLI 3 和 Webpack 4 开始了一个新项目。一切正常，但由于某种原因我无法绑定图像。我的结构非常简单：
<div id="app">
<div v-for="item in items">
{{ item.name }}
<img :src="'../public/images/' + item.img">
</div>
</div>
然后，我的项目数组。它来自我在 Vuex 中的商店。
items = [
{
name: 'my-name-1',
img: 'image-1.png'
},
{
name: 'my-name-2',
img: 'image-2.png'
},
{
name: 'my-name-3',
img: 'image-3.png'
}
]
我一直在玩 Webpack，因为我猜问题出在那里。我改变了一些配置，我用不同的路径（./，../，~/...）进行了测试，但没有任何效果......我做错了什么？提前致谢。
我遇到的问题是在webpack中使用vue.js.
我有一个列表,我想在vue.js中动态填充.
我正在使用v-for迭代每个对象并创建列表项.
要将img src标记绑定到数据点{{resource.img}},它看起来像这样:<img v-bind:src="resource.img">动态加载图像.
但是,当客户端呈现页面时,src路径是正确的,但它是实际的相对路径(例如"../assets/example.png"等,而不是路径webpack输出.因此,图像创建404因为"../assets/example.png"没有图像.
或者,如果我硬编码src图像加载,并且src是webpack创建的路径,找到正确的图像.
如何使用webpack和vue.js动态设置src？
我的 vue 应用程序，使用别名进行 img-src 绑定。它运行直接使用。
<img src="@/assets/search.png" />
但是，此代码使组件，别名无法解析。
<template>
<div class="button-card">
<img :src="src">
</div>
</template>
<script>
export default {
name: 'Button Card',
props: {
src: {
type: String,
},
},
};
</script>
使用组件构建结果 html：
<div class="button-card">
<img src="@/assets/search.png">
<!-- should be with resolve: src/assets/search.png -->
</div>
Webpack 别名定义配置：
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
为什么此代码无法解析？或者我该怎么做才能让它运行？