vue如何给new Image()的img.src传入本地图片地址
时间: 2024-04-30 13:17:32 浏览: 47
在vue中,我们可以通过require或者import的方式引入本地图片,并将其作为new Image()的src属性值。具体实现步骤如下:
1. 在组件中引入图片
```javascript
import myImage from '@/assets/myImage.png';
```
2. 在methods中创建一个函数,函数中创建一个Image对象,并将引入的图片地址作为src属性值赋给Image对象
```javascript
methods: {
loadImage() {
const img = new Image();
img.src = myImage;
img.onload = () => {
console.log('图片加载完成');
};
},
},
```
3. 在template中添加一个按钮,通过@click事件触发loadImage函数
```html
<template>
<div>
<button @click="loadImage">加载图片</button>
</div>
</template>
```
这样,当点击按钮时,就会调用loadImage函数,创建一个Image对象,并将本地图片地址作为src属性值赋给Image对象,从而实现本地图片的加载。
相关问题
vue将base64转换为img图片路劲
在Vue中,可以使用以下代码将base64字符串转换为图片路径:
```html
<template>
<div>
<img :src="imgPath" alt="图片">
</div>
</template>
<script>
export default {
data() {
return {
imgPath: ''
}
},
mounted() {
this.base64ToImgPath('data:image/png;base64,iVBORw0KG...') // 传入base64字符串
},
methods: {
base64ToImgPath(base64Str) {
const blob = this.base64ToBlob(base64Str)
const url = URL.createObjectURL(blob)
this.imgPath = url
},
base64ToBlob(base64Str) {
const arr = base64Str.split(',')
const mime = arr[0].match(/:(.*?);/)[1]
const bstr = atob(arr[1])
let n = bstr.length
const u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new Blob([u8arr], {type: mime})
}
}
}
</script>
```
其中,base64Str是base64字符串,base64ToImgPath是一个方法,用于将base64字符串转换为图片路径。在mounted钩子函数中,调用该方法并传入base64字符串。该方法首先将base64字符串转换为Blob对象,然后通过URL.createObjectURL方法将Blob对象转换为图片路径,最后将图片路径赋值给img的src属性。
怎样动态的传入img标签的src属性
在Vue3中,可以使用`:src`指令来动态绑定`img`标签的`src`属性。例如:
```html
<template>
<div>
<img :src="imageUrl" alt="图片">
<button @click="changeImage">换一张图片</button>
</div>
</template>
```
```javascript
import { ref } from 'vue';
export default {
setup() {
const imageUrl = ref('https://via.placeholder.com/150');
function changeImage() {
imageUrl.value = 'https://via.placeholder.com/200';
}
return {
imageUrl,
changeImage
};
}
};
```
在上面的例子中,我们在模板中使用`:src="imageUrl"`来动态绑定`img`标签的`src`属性,然后在组件的`setup`函数中,使用`ref`函数创建一个响应式引用`imageUrl`,并在`changeImage`函数中修改`imageUrl`的值来动态改变图片的地址。当点击按钮时,`imageUrl`的值被修改为`https://via.placeholder.com/200`,`img`标签的`src`属性也会相应地改变,显示一张不同的图片。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![.zip](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)