vue中如何使用v-for给src赋值变量路径

JesusAllen30 2017-03-28 02:55:43

如何将items中src赋值给上面的img中？

上面的写法报404错误

...全文

2513 1 打赏收藏转发到动态举报

写回复

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

miguo4 2018-03-02

打赏
举报

回复

你的思路没有没问题！
你加载本地的路径不对！

我的代码结构如下面代码所示，无法执行，在img中的src属性中无法用v-for遍历填加 var itemBody = { props: ["itemList"], template: ` <div> <div class="item" v-for="(item,index) in itemList">

v-for渲染时，处理v-bind:src的几种方式，最推荐public

vue的v-for循环中图片加载路径问题产品要求要求图片和它的名字一一对应， vue中的img的src可以动态绑定到一个变量上 <template> <div id="app"> <ul> <li v-for ="a,b in data" :key="b"> <img :src="a.url" alt="flowers"> <p>{{item}}</p>

它对a.url进行了一次解析变成了字符串，就完事了，绑定变量，就是解析一次。而对于url 来说，它本来就是变量，无法再进行分割解析，所以它会去data 里面去找，如果找不到，才报错。原文链接：https://blog.csdn.net/qq_47648083/article/details/121383667。把item.EnName 变成图片的地址,有人提到了require 方法,require 它是一个表达式，可以进行赋值操作。版权声明：本文为CSDN博主「懒啦」的原创文章，

　　先看一下产品需求，如下图所示，　　产品要求图片和它的名称一一对应，本来是非常简单的需求，后台直接返回图片路径和名称，前台直接读取就可以了，但是我们没有存储图片的服务器，再加上是一个实验性的需求，图片需要存放到前台。当时我想，vue中的img的src可以动态绑定到一个变量上，很简单吗，就没有考虑太多，直接开始做了。　　首先和后台商量一下数据结构，因为图片要和名称一一对应，所以...

10,612

社区成员

29,029

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章