【Vue】在vue-cli中绑定图片src属性

已于 2023-09-17 21:47:55 修改
阅读量1.1k 收藏
点赞数 1
分类专栏： JavaScript 文章标签： vue :src
于 2018-08-12 10:34:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AC_greener/article/details/81604140
版权

最近在做项目的时候碰到这个问题了，搞了半天解决了，记录一下

先来看一下vue-cli生成的项目目录：
在这里插入图片描述
一开始我是把img放在assets中，这样使用src的：

 <img src="@/assets/img/articleImg.jpg" alt="" >

是没啥问题，但是我要在循环中动态绑定一个图片，写成了这样：

<img :src="'@/assets/img/articleImg'+ index + '.jpg'" alt="" >

这样就不能显示出来图片了。
原因就是webpack不能解析这个图片的这个src属性，如下图：
在这里插入图片描述

解决方法就是把img文件夹放到static文件夹下面，webpack不会打包这个文件，但要注意这里要用绝对路径如： /static/img/XXX.jpg。然后再去绑定img就可以啦
在这里插入图片描述

程序员通通
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue-cli开发的商城源代码
01-18
在这个"vue-cli开发的商城源代码"项目中，我们可以看到一系列与前端开发、Vue.js 框架以及构建电商平台相关的知识点。 首先，`vue.js` 是一个轻量级的前端框架，由尤雨溪开发，它的核心特性包括组件化、虚拟DOM、...
vue-cli脚手架引入图片的几种方法总结
08-27
在 Vue CLI 脚手架中引入图片是一项基本操作，但是在实际开发中，开发者们可能会遇到各种问题。以下是在 Vue CLI 脚手架中引入图片的几种方法总结： import 方法 在 Vue 组件中使用 import 语句引入图片是一种常见...
img使用 :src 动态绑定图片地址，图片不成功
m0_67880202的博客
04-12 554
此时图片没有出现，控制台报错 http://localhost:8080/assets/animals1.jpeg 404 (Not Found)使用vue cli 创建的vue2项目，项目中想实现轮播效果。使用require引入图片，完整代码如下，此时图片引入成功。使用 :src 动态绑定图片地址，图片没有出现。此时控制台中出现的图片地址是。
vue中如何动态配置img标签的src
W78955的博客
04-18 1875
vue中如何动态配置img标签的src
vue动态设置图片img地址属性src
最新发布
面向未来的历史
04-15 895
此处， 一定要写为： ${name}。此处如果图片地址为静态的（写死了地址），编译后，代码中的图片地址为静态的，编译后的图片地址带有hash， 导致找不到图片，前端就无法显示图片。页面有多张图片，动态的设置图片的链接src， 即： :src。
vue图片的动态绑定
shiyibushiwei的博客
08-17 3763
vue图片的动态绑定，就是想办法给路径前边加一个require()
(vue):src图片不显示解决办法
nyf_unknow的博客
05-26 4671
2.把图片放在cdn上，把网络地址存在imgUrl里，然后直接去展示。3.图片放在assets文件夹，然后在data里面require进图片。1.把图片放在src同级的static文件夹下。
前端利用图片链接下载图片
qq_42423991的博客
07-29 1146
downloadByBlob(url, name) { const image = new Image() image.setAttribute('crossOrigin', 'anonymous') image.src = url image.onload = () => { const canvas = document.createElement('canvas') canvas.width = image.wid.
vue循环绑定img图片路径加载不出来？使用这两种方法绝对好使
一家外包公司的码农，专职前端开发
01-20 8535
相信来到这里，应该是图片路径的难题困扰了你。我的图片路径明明是正确的呀！为什么图片出不来呢？其实是引入方式的问题，还是老样子，我们直接上方法。 第一种：使用require引入本地图片路径。 第二种：使用远程服务器图片路径。 第三种：（大聪明——自研失败品：可忽略不看）修改本地路径与vue项目路径保持一致。 第一种：使用require引入本地图片路径。 <template> <div> <!-- 循环遍历data中的img数据 绑定index --&
在vue-cli创建的项目中使用sass操作
10-14
在Vue.js开发中，Vue CLI（Vue脚手架）是一个非常强大的工具，它可以帮助开发者快速构建项目并自动化很多配置工作。Vue CLI支持多种预处理器，包括Sass，这是一个广泛使用的CSS扩展语言，提供了变量、嵌套规则、混合...
在vue-cli中组件通信的方法
08-28
在 Vue CLI 中，组件通信是构建复杂应用时的关键技术。组件间的通信主要包括三种方式：父组件向子组件通信、子组件向父组件通信以及非父子组件之间的通信。 ### 一、父组件向子组件通信 在 Vue CLI 中，父组件向子...
vue 动态绑定背景图片的方法
10-18
主要介绍了vue 动态绑定背景图片的方法,在文末给大家介绍了vue如何给v-for循环的标签添加背景图片，需要的朋友参考下吧
vue2-pro-cli:创建基于vue2 + TypeScript的Webfront模板项目
05-07
在命令行中运行以下命令来全局安装Vue2-Pro-CLI： ```bash npm install vue2-pro-cli -g ``` 这将下载并安装Vue2-Pro-CLI的相关依赖，使其能够在你的系统上全局使用。 ### 使用Vue2-Pro-CLI 一旦安装完成，你...
vue动态设置img的src路径
热门推荐
haeasringnar的博客
07-30 7万+
相信开发的小伙伴已经遇到这个问题了，动态切换img标签的src时，写的路径就是不生效，原因是vue并没有把你的路径字符串当做路径来处理，而是直接当做字符串了，当然网上也有很多方法，这里使用的是最有效的方法。 看代码： 使用导入资源的方式 &lt;template&gt; &lt;div @click="home"&gt; &lt;img :src="home_url" a...
vue动态绑定设置图片 src 路径
Frankenstein_的博客
07-17 6492
动态绑定图片URL地址显示 <img :src="imgURL" style="width: 25px;height: 25px; "/></span> 设置 imgURL 的值动态改变图片url data() { return { imgURL : require(`@/assets/mapP...
Vue中img的src属性绑定与static文件夹
悦涵仙子的技术笔记本
12-14 2万+
不少人在vue的开发中遇到这样一个问题： img的src属性绑定url变量，然而图片加载失败。 大部分的情况中，是开发者使用了错误的写法，例如：这样写肯定是不对的，正确的写法应该使用v-bind:不过，有时候即使使用了正确的语法，依旧无法显示图片，因为你的imgUrl使用了本地图片的路径。 例如
vue添加img的src地址 v-bind
weixin_30675247的博客
09-05 960
vue获取数据用{{ a }} 但是放在img标签的src里面不被解析 按照上述用法 html部分 <div id="test2"> <img src="{{ url }}" alt=""> </div> js部分 const vm1 = new Vue({ el: '#...
vue中使用v-for循环动态加载图片(:src)失败的解决方法
ThisEqualThis的博客
11-24 7094
在vue中使用v-for循环动态加载图片，如果img的src为url链接地址时，图片可以显示出来；但是一旦换成本地静态图片资源，加载就出现了问题，图片碎裂，无法加载。 使用url链接时，图片正常动态加载： <template> <van-swipe class="goods-swipe" :autoplay="3000"> <van-swipe-item v-f...
vue中v-for图片src路径错误
IT菜鸟
06-19 4305
一、问题概述 <img :src="data.src" class="nav-img"> 1. html结构如下： <ul class="nav-list"> <li v-for="data in navlist" :key="data.index"> <div class="item"> <!--{{...
vue-cli绑定到ngnix
03-31
要将Vue CLI绑定到Nginx，请按照以下步骤操作： 1. 在本地计算机上使用Vue CLI创建Vue项目：`vue create my-project` 2. 在Vue项目的根目录中运行`npm run build`，以生成生产就绪的文件。 3. 将生成的文件复制到Nginx服务器的web目录中。例如，将文件复制到`/var/www/my-project`目录中。 4. 在Nginx服务器上安装并配置Nginx。确保Nginx配置文件中有以下内容： ``` server { listen 80; server_name your-domain.com; root /var/www/my-project; index index.html; location / { try_files $uri $uri/ /index.html; } } ``` 在上面的示例中，`your-domain.com`是您的域名，`/var/www/my-project`是您在步骤3中复制Vue项目文件的目录。 5. 重新启动Nginx服务器以使更改生效：`sudo service nginx restart` 现在，您的Vue项目已成功绑定到Nginx服务器，可以通过您的域名访问它。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值