vue中 用 require 动态获取本地图片
时间: 2024-05-12 21:21:16 浏览: 11
在 Vue 中使用 `require` 动态获取本地图片,可以按照以下步骤:
1. 在 `src/assets` 目录下创建一个 `images` 文件夹,用于存放图片文件。
2. 将需要使用的图片文件放入 `src/assets/images` 文件夹中。
3. 在 Vue 组件中,使用 `require` 导入图片文件,例如:
```
<template>
<div>
<img :src="require('@/assets/images/my-image.png')" alt="My Image">
</div>
</template>
```
注意:`require` 中的路径需要以 `@` 开头,表示使用 `src` 目录作为根路径。
4. 运行项目,在浏览器中查看,应该能够正常显示指定的图片。
相关问题
vue for循环时 使用require动态路径本地图片不存在怎么使用默认图片
可以在v-bind中使用三元表达式,判断当前图片是否存在,若不存在则使用默认图片路径。示例代码如下:
```
<template>
<div>
<div v-for="(item, index) in imgList" :key="index">
<img :src="getImageUrl(item.imgUrl)" alt="图片">
</div>
</div>
</template>
<script>
export default {
data() {
return {
imgList: [
{ imgUrl: 'img1.png' },
{ imgUrl: 'img2.png' },
{ imgUrl: '' }
]
}
},
methods: {
getImageUrl(url) {
try {
return require(`@/assets/${url}`);
} catch (error) {
return require('@/assets/defaultImg.png');
}
}
}
}
</script>
```
以上代码中,`getImageUrl`方法会尝试获取图片路径`require(`@/assets/${url}`)`,若图片不存在则会捕获异常,返回默认图片路径`require('@/assets/defaultImg.png')`。
vue+element-ui 动态加载本地图片
在Vue和Element-UI中动态加载本地图片可以使用require语法。首先,将图片路径存储在数据库中。然后,在Vue组件中,通过使用`require()`函数来加载图片。下面是一个示例代码:
```html
<template>
<el-image class="table-td-thumb" :src="require(scope.row.img)"></el-image>
</template>
```
在这个例子中,`scope.row.img`是从数据库中获取的图片路径。通过使用`require()`函数来加载图片,确保路径正确。这样就能够实现在Vue和Element-UI中动态加载本地图片。
请注意,不需要在`require()`函数周围添加引号,如你提到的错误代码`require(../../assets/img/coca.jpg)`。正确的写法是`:src="require('../../assets/img/coca.jpg')"`。
希望这个回答对你有帮助!