# ¿Cómo referirse a una imagen por nombre especificado en la configuración?

**URL:** <https://meta.discourse.org/t/how-to-reference-to-an-image-by-name-specified-in-setting/288260>\
**Category:** Development\
**Created:** [11 Diciembre, 2023 16:39 UTC](https://meta.discourse.org/t/how-to-reference-to-an-image-by-name-specified-in-setting/288260 "2023-12-11T16:39:06Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![fbpbdmin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fbpbdmin/32/300893_2.png) [@fbpbdmin](https://meta.discourse.org/u/fbpbdmin)\
**Post date:** [11 Diciembre, 2023 16:39 UTC](https://meta.discourse.org/t/how-to-reference-to-an-image-by-name-specified-in-setting/288260/1 "2023-12-11T16:39:06Z")

</div>

en un componente de tema, que muestra una imagen (sombrero) en pantalla  
para usar una imagen en scss, funciona con su nombre de activo directamente así,  
estas imágenes se definen en about.json

```plaintext
{
  "name": "christmas-decorations",
  "about_url": "",
  "license_url": "",
  "author": "",
  "assets": {
    "red-hat1": "assets/decorations/red-hat1.png",
    "red-hat2": "assets/decorations/red-hat2.png",
    "squirrel2": "assets/decorations/squirrel2.png"
  }
}

```

para usar estas imágenes en scss, funciona bien si se usa el nombre del activo directamente así

```plaintext
background: transparent url($red-hat1) top left no-repeat;

```

Quiero agregar una configuración para elegir una imagen.  
en settings.yml, tengo esto, para seleccionar una imagen de sombrero para mostrar en pantalla

```plaintext
hat_type:
  default: red-hat1
  type: enum
  choices:
    - red-hat1
    - red-hat2
    - squirrel2

```

Podría usar un if else en scss para usar la imagen, pero este bloque if else podría ser demasiado largo …

```plaintext
    @if $hat_type == "red-hat1" {
      background: url($red-hat1) no-repeat center;
    } @else if $hat_type == "red-hat2" {
      background: url($red-hat2) no-repeat center;
    } @else if $hat_type == "squirrel2" {
      background: url($squirrel2) no-repeat center;
    }

```

* * *

Intenté usar una función en scss

```plaintext
 background: url(get_image($hat_type)) no-repeat center;

@function get_image($name){
  @return "assets/decorations/" + $name + ".png"
}

```

pero esto obtiene una url como  
`https://www.domain.com/stylesheets/assets/decorations/squirrel2.png`  
esto no funciona, debería resolverse así en su lugar…  
`https://www.domain.com/uploads/db9860/original/3X/9/1/91d36fdb030047c6390f9ca85604fdbfd2e3fc12.png`

¿Alguien podría dar una pista, muchas gracias 🙂 …

---

_[View the full topic](https://meta.discourse.org/t/how-to-reference-to-an-image-by-name-specified-in-setting/288260)._