Using images in custom module (not through css)

Question

I am making a flex slider module, and it needs to just load some images statically, the only way I was able to get hold of any of the images was when I used a relative path in a background-image: url(relative-path-to-image) in a css file, but I am not interested in loading it through css.

If I try to access it relative from the template, using <img src="relative-path-to-image"> it won't work of course, because the src tag are being loaded on the client. I have looked a bit at the templating system and I can use a {{ directory }} variable inside of twig, to maybe get the absolute path to the images right. But I just feel like even if I made that work it would still be a disaster implementation.

So my question is, if you need to add a tag and give it a src path-to-image, what is your go-to solution to get that image accessible?

Answer 1

If you want to access images in the module folder:

preprocess function (assuming page, but can be any other template):

mymodule.module:
function mymodule_preprocess_page(&$variables) {
  global $base_root, $base_path;
  $variables['image1'] = $base_root . $base_path . drupal_get_path('module', 'mymodule') . '/images/' . $image1;
}

twig:

<img src="{{ image1 }}" />

I don't know your logic for multiple images, I guess you have to code a loop for this.

But accessing static images in a module folder is not a cms way to do this, I would put the images into a node. You can make a content type "slider" for this and then access the absolute path of the image field:

twig:

<img src="{{ file_url(slider_node.field_slider_image.0.entity.uri.value) }}" />

Here you can code a twig loop to access multiple images in the field.