vue动态设置img的src路径实例
相信开发的小伙伴已经遇到这个问题了，动态切换img标签的src时，写的路径就是不生效，原因是vue并没有把你的路径字符串当做路径来处理，而是直接当做字符串了，当然网上也有很多方法，这里使用的是最有效的方法。
看代码：
使用导入资源的方式
<template>
<div @click="home">
<img :src="home_url" alt="..." style="height: 10vw">
</div>
</template>
<script>
// 下面是导入两张图片的相对地址
import home_no from '../static/icon/home_no.png'
import home from '../static/icon/home.png'
export default {
name: "newbase",
data () {
return {
home_url: home
}
},
methods: {
home() {
this.home_url = home
}
}
}
</script>
这样就可以非常有效的，动态改变img的图片路径。
以上这篇vue动态设置img的src路径实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持小牛知识库。
-
动态img src由Webpack的要求处理： 如何在使用Rollup的vite应用程序上实现这一点？
-
本文向大家介绍vue中img src 动态加载本地json的图片路径写法，包括了vue中img src 动态加载本地json的图片路径写法的使用技巧和注意事项，需要的朋友参考一下 目录： 注意：本地json文件和json文件里的图片地址都必须写在static 静态文件夹里；否则json文件里的url地址找不到。 major_info.json文件里的图片路径写法 页面通过v-bind的方式加载：
-
本文向大家介绍怎么解决vue动态设置img的src不生效的问题？相关面试题，主要包含被问及怎么解决vue动态设置img的src不生效的问题？时的应答技巧和注意事项，需要的朋友参考一下 这个 不明确，这个应该属于打包工具范畴，和 Vue 没多大关系。可以用一个很简单的例子证明，直接用 script 的形式引入vue，然后更改src的值看能不能访问，麻烦你们弄清楚其中的原理再来解决问题 为什么不把自己
-
我做了一个画廊，包含一些不同的图像和点击他们打开模态，并显示图像的缩放。 我使用相同的方法与投资组合，但在这里我只有4项，所以我创建4种不同的模态，显示描述等... 现在有了图像，我想要一个单一的模式，改变图像显示与用户点击。 包含图像的div是这样结构的： 这里是模态： 这里是jQuery： 以下链接 问题是，当我点击图片时，网站显示模式，但不显示里面的图片。。。使用inspect代码，我看到s
-
问题内容： 我在jsp页面中有一个img标签，其中src路径要求传递标头参数来获取图像。我们如何实现呢？ 问题答案： 首先，您需要发出一个设置头文件的ajax请求。然后，您需要使用一些HTML5 API将接收到的二进制数据转换为base64。最后，使用协议和base64数据设置映像src 。 资料来源： https://developer.mozilla.org/zh- CN/docs/Web/A
-
本文向大家介绍vue 动态设置img的src地址无效,npm run build 后找不到文件的解决，包括了vue 动态设置img的src地址无效,npm run build 后找不到文件的解决的使用技巧和注意事项，需要的朋友参考一下 动态设置img的src属性无效，而直接写可以 解决办法： imgSrc写成require('path')； 原因： 动态添加src被当做静态资源处理了，没有进行编译