This is the third day of my participation in Gwen Challenge

Images are one of the most common ways to display information on a page. Image resources can be imported locally or loaded remotely.

1. Remote loading

Remote loading refers to providing the URL of the image. The image is downloaded and displayed on the page through an HTTP request during page loading.

Set the SRC attribute of the Image tag to the Image URL in Taro:

// src\pages\liyue\index.js
import { Component } from 'react'
import { View, Text,Image,Button } from '@tarojs/components'
import Taro from '@tarojs/taro'
export default class Index extends Component {
  render () {
    return (
      <View className='index'>
        <View>Glass on</View>
        <View>A fertile harbour east of the tiwat continent.</View>
        <Text>The magnificent mountain foothills and stone forests, vast plains and vibrant river beaches together constitute the rich landform of Lyue, which radiates colorful splendor under the distinctive climate of four seasons. Between the stone wonders, and buried how many ancient gifts of the demon god of rock waiting for people to discover it?</Text>
        <Image src='https://uploadstatic.mihoyo.com/contentweb/20200319/2020031921552395638.jpg'
        mode='center'
        />
      </View>)}}Copy the code

Effect:

Import /require load local images

Local images can be introduced in Taro by importing or requiring:

// src\pages\mengde\index.js
import { Component } from 'react'
import { View, Text,Image } from '@tarojs/components'
import Logo from '.. /.. /image/logo.png'
export default class Index extends Component {
  render () {
    return (
      <View className='index'>
        <View>mond</View>
        <View>A free city in the northeast of tiwat.</View>
        <Text>Between the mountains and the open plains, the wind of freedom wafts the scent of dandelion over the wine Lake, bringing the blessings of babatos, the wind god, to the city of Mond, which lies on an island in the middle of the lake.</Text>/ / the import mode<Image style="width: 100px; height: 100px;" src={Logo} />/ / the require<Image style="width: 100px; height: 100px;" src={require('././image/logo.png')} / >
      </View>)}}Copy the code

In this way, images are packed into the DIST directory when they are packaged. Due to the size limitation of the small program, it is not recommended to import large or large images in this local way.

The local image in the style is automatically converted to Base 64

By default, local resources cannot be directly referenced in the style of small programs. Resources can only be referenced in the way of network address and Base64. To facilitate development, Taro provides a way to directly reference local resources in the style file. It works by converting local resource references in styles to Base64 format through PostCSS’s PostCSS-URL plug-in so that they can be loaded properly.

Taro converts resources smaller than 1kb by default. If you need to modify the configurations, you can modify the configurations in config/index.js. The configurations are located in mini-postcss.

// config\index.js
const config ={
    // Omit other configuration items
    mini: {
    postcss: {
      url: {
        enable: true.config: {
          limit: 1024 // Set the maximum conversion size}}}},Copy the code

demo:

import { Component } from 'react'
import { View, Image } from '@tarojs/components'

export default class Index extends Component {
  render () {
    return (
      <View class="img-bg"></View>)}}Copy the code
.img-bg {
    width: 100px;
    height: 100px;
    background-size: contain;
    background-image: url('.. /.. /image/iconfont-zan.svg');
}
Copy the code

Effect:

Compiled index.wxss

Note that this method can only be used in styles and is not valid on the SRC attribute of the Image tag.