v-for怎么加载本地静态图片

php中世界最好的语言

发布时间：2018-03-27 16:00:10

2322人浏览过

来源于php中文网

原创

这次给大家带来v-for怎么加载本地静态图片，v-for加载本地静态图片的注意事项有哪些，下面就是实战案例，一起来看一下。

vue-cli 项目中本地图片放在assets目录下（原因vue-cli最开始的vue图片就在里面，就把所有图片放在里面了）；

之后v-for 动态加载图片路径就遇到了问题

源码：




{{item.name}}
{{item.position}}
VS


for(var i = 0;i结果发现浏览器中虽然img 的src 路径加载出来.但图片并未显示，百度后发现是webpack打包解析为了字符串，而非真实路径
改为
for(var i = 0;i当然如果一开始将静态图片放在static目录下，可能就不会出现这样的问题，一开始就欠缺考虑了。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：

							
								
								
									QIMI奇觅
									美图推出的游戏行业广告AI制作与投放一体化平台
								
								下载 
							
						
Vue.directive()的图文详解

Node.js爬取豆瓣数据实例

H5页面制作中如何减少首屏加载时间首屏秒开的6个优化秘籍

H5页面制作中如何避免性能卡顿问题性能优化让H5如丝般顺滑

H5页面如何实现用户登录状态保存用户会话保持技术方案对比

H5页面如何实现弹窗广告延时显示智能延时弹窗实现方法详解

H5页面制作中如何集成支付接口支付功能接入全流程解析

相关标签:

node.js webpack Static for 字符串 JS

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：如何用v-for给src属性赋值下一篇：vue中解决v-for使用报红并出现警告

作者最新文章

最新php程序员工具箱 v1.0版本介绍

2018-07-11 12:56

使用jQuery替换节点元素（附代码）

2018-06-15 15:22

Angular CLI+Angular 5实战项目演示

2018-06-15 15:34

怎样对JS原型与原型链进行使用

2018-06-15 15:37

如何利用jquery做出文件上传加载

2018-06-15 15:39

如何在项目中使用jQuery内each方法

2018-06-15 15:40

怎样操作JS字符串与特殊字符

2018-06-15 15:42

怎样在项目中使用js绑定DOM事件

2018-06-15 15:46

怎样使用js解析数据库（附代码）

2018-06-15 15:49

vue.js路由失效如何处理

2018-06-15 15:55

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI 编程开发 AI 聊天问答

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI 编程开发 AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI 编程开发 Agent智能体

腾讯元宝

腾讯混元平台推出的AI助手

文档处理 AI 聊天问答

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI 编程开发 AI 文本写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

AI 文本写作中文写作

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI 编程开发 AI 文本写作

智谱清言 - 免费全能的AI助手

AI 编程开发 Agent智能体

相关专题

node.js调试

node.js调试可以使用console.log()输出调试信息、断点调试和第三方调试工具。详细介绍：1、console.log()输出调试信息，通过在代码中插入console.log()语句，开发人员可以在控制台输出变量的值、函数的执行结果等信息，以便观察代码的执行流程和状态；2、断点调试，可以在代码中设置断点，以便在特定位置暂停代码的执行，观察变量的值和执行流程等。

348

2023.09.19

JavaScript 全栈开发基础（Node.js + 前端）

本专题系统介绍 JavaScript 在全栈开发中的核心知识结构，涵盖 Node.js 基础、Express/Koa 接口构建、前端交互设计、模块化与包管理、数据库连接、前后端数据通信与部署流程。通过完整项目示例，帮助学习者掌握从浏览器到服务器的一体化开发能力，实现真正意义上的全栈入门。

105

2025.11.26

js 字符串转数组

js字符串转数组的方法：1、使用“split()”方法；2、使用“Array.from()”方法；3、使用for循环遍历；4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容，供大家免费下载体验。

298

2023.08.03

js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容，供大家免费下载体验。

212

2023.09.04

java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友，请阅读本专题下面的的有关文章，欢迎大家来php中文网学习。

1502

2023.10.24

字符串介绍

字符串是一种数据类型，它可以是任何文本，包括字母、数字、符号等。字符串可以由不同的字符组成，例如空格、标点符号、数字等。在编程中，字符串通常用引号括起来，如单引号、双引号或反引号。想了解更多字符串的相关内容，可以阅读本专题下面的文章。

624

2023.11.24

java读取文件转成字符串的方法

Java8引入了新的文件I/O API，使用java.nio.file.Files类读取文件内容更加方便。对于较旧版本的Java，可以使用java.io.FileReader和java.io.BufferedReader来读取文件。在这些方法中，你需要将文件路径替换为你的实际文件路径，并且可能需要处理可能的IOException异常。想了解更多java的相关内容，可以阅读本专题下面的文章。

633

2024.03.22