vue中自定义文字样式和动态渲染图片

本文介绍了如何在CSS中使用`@import`导入字体样式,以及通过`@font-face`定义自定义字体。同时,详细阐述了在Vue.js中动态加载图片的方法,包括在`data`或`computed`属性中定义图片路径,并在模板中使用变量显示图片。此外,还展示了如何在同一目录下渲染多个图片的技巧。

1)文字

在style标签引入

@import "路径";
/*例如:*/
@import "font/font.css";
/*此文件格式*/
@font-face {
  font-family: 'FontName';
  src: url('TTTGB-Medium180130.ttf');
  font-weight: normal;
  font-style: normal;
}

使用:

 font-family: 'FontName';

2)图片

定义:

data(){
	return{
		url:require("../../assets/img/1.png")
	}	
}

或者

computed(){
	setIMG(){
      return require("../../assets/img/1.png")
    }
}

使用

使用变量名即可

同一目录下渲染多个图片

methods: {
	getImg(img) {
		return '../../assets/img/' + img;
	},
}

使用

<img class="xzimg" :src="getImg('1.png')" />
Vue 3 中,实现自定义数组循环渲染图片的核心在于正确地使用 `v-for` 指令以及合理地处理图片路径。以下是一个完整的实现方法,适用于本地静态资源的动态渲染。 ### 使用 `v-for` 循环渲染图片 假设你有一个自定义数组 `images`,其中每个元素包含一个图片文件名对应的描述文本。可以使用 `v-for` 来循环渲染这些图片。 #### 模板部分 ```html <template> <div class="image-gallery"> <div v-for="(item, index) in imageList" :key="index" class="image-item"> <img :src="item.src" :alt="item.alt" /> <p>{{ item.alt }}</p> </div> </div> </template> ``` #### 脚本部分 ```javascript <script setup> import { ref, computed } from 'vue'; // 自定义图片数组,包含图片文件名描述 const images = ref([ { alt: '大坝图片1', filename: 'u1339.png' }, { alt: '大坝图片2', filename: 'u1336.jpg' }, { alt: '大坝图片3', filename: 'u1337.jpg' }, { alt: '大坝图片4', filename: 'u1338.jpg' } ]); // 动态计算图片路径 const imageList = computed(() => { return images.value.map(item => { const src = new URL(`../../assets/image/${item.filename}`, import.meta.url).href; return { src, alt: item.alt }; }); }); </script> ``` #### 样式部分(可选) ```css <style scoped> .image-gallery { display: flex; flex-wrap: wrap; gap: 16px; } .image-item { text-align: center; } </style> ``` ### 实现说明 - **`v-for` 指令**:用于循环渲染图片列表,每个 `item` 包含 `src` `alt` 属性。 - **`new URL()` 方法**:这是 Vite 项目中推荐的动态导入本地资源的方式。通过 `new URL('../../assets/image/xxx.png', import.meta.url)` 可以正确解析图片路径[^3]。 - **`computed` 计算属性**:确保每次 `images` 数组发生变化时,图片路径会重新计算,保持响应性。 - **`ref` 与 `value`**:在 `setup()` 模式下,使用 `ref` 需要通过 `.value` 访问其值。 ### 注意事项 - 确保图片路径 `../../assets/image/` 是相对于当前组件文件的位置。 - 图片文件应放在 `src/assets` 目录下,以便 Vite 正确处理静态资源。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值